App navigation
Navbars, sidebars, tabs, menus, command palette and layout primitives for application UIs.
App navbar
Root .sf-navbar with data-sf-navbar. Under 720px of its own width the links fold into a sheet behind the burger, which morphs into an X.
Sidebar
Root .sf-sidebar with data-sf-sidebar. Collapses to icons via data-sf-sidebar-toggle; the active pill slides between items; groups nest.
Tabs
Root .sf-tabs with data-sf-tabs; modifiers --pill, --vertical. Arrow keys, Home and End move between tabs; the indicator slides with a spring.
Breadcrumbs
Root .sf-crumbs. Long trails collapse into an ellipsis button that opens a dropdown menu.
Pagination
Root .sf-pagination with data-sf-pagination data-total data-page data-siblings; JS renders the buttons and slides the highlight. --compact shows prev/next with a status label. Emits soft:page.
Dropdown menu
Root .sf-dropdown[data-sf-menu] with a [data-sf-menu-trigger] and a .sf-menu. Arrow keys, Home/End, typeahead, Escape, checkable items and a submenu (right arrow). Emits soft:menu-select.
Context menu
Add data-sf-context="menu-id" to any area; the menu is a hidden .sf-menu. Right-click, long-press on touch, or press the Menu key when the area is focusable.
Command palette
A dialog.sf-command[data-sf-command]. Press Cmd/Ctrl+K anywhere, or call Soft.command.open(). Fuzzy filter, groups, shortcuts, arrow navigation and recent items.
Accordion
Root .sf-accordion[data-sf-accordion]; use data-sf-accordion="multiple" to allow several open. Height animates smoothly, the chevron springs.
Collapsible
Root .sf-collapsible[data-sf-collapsible]; --inline for a lightweight "show more".
Bottom tab bar
Root .sf-tabbar[data-sf-tabbar]. A bubble stretches and settles under the active item; add --fixed to pin it to the viewport bottom.
App shell layout
Root .sf-shell (header + sidebar + main grid, sticky header and side, scrolling main). Set --sf-shell-h; below 760px of its own width the sidebar becomes a drawer opened with data-sf-sidebar-drawer.
Main content scrolls
The header and sidebar stay put while this area scrolls. Resize the window or use the narrow shell below to see the drawer layout.
Narrow shell: tap the menu button for the drawer.
Overview
Content takes the full width on small screens.
Page header
Root .sf-pagehead with slots for breadcrumbs, title, description, actions and tabs.
Orbit redesign
Everything about the spring release: scope, owners and what ships when.
Tree view
Root ul.sf-tree[data-sf-tree] (single, multiple or none). Up/Down, Left/Right, Home/End, Enter and * are supported.
-
src
-
components
- Button.tsx
- Sidebar.tsx
- index.ts
-
-
assets
- logo.svg
- cover.png
- README.md
- package.json
Split pane
Root .sf-split[data-sf-split] (add data-orientation="vertical" to stack). Drag the handle, use arrow keys (Shift for bigger steps), Home/End, Enter to collapse, double-click to reset.
Drag the divider or use the arrow keys.
This pane takes the room that is left.
Toolbar
Root .sf-toolbar[data-sf-toolbar] with groups, aria-pressed toggles, separators and an overflow menu when space runs out. Arrow keys move between buttons.
Narrow: extra tools move into the overflow menu.
Kbd and shortcut hints
Key caps .sf-kbd (sizes --sm --lg, --fill), grouped with .sf-kbd-group; data-sf-mod shows Cmd on Mac and Ctrl elsewhere. Inside data-sf-kbd-live, caps with data-key light up as you press them.
Divider
Root .sf-divider with --label, --vertical, --dotted, --dashed.
Scroll area
Root .sf-scroll[data-sf-scroll] with a styled scrollbar and fading edges. --shadow swaps the fade for edge shadows; data-axis="x" scrolls sideways.
2.4 adds nested groups to the sidebar and a faster command palette.
2.3 brings split panes with keyboard resizing.
2.2 introduces the floating dock and speed-dial buttons.
2.1 polishes tabs with a sliding indicator.
2.0 is a ground-up rewrite with springier motion.
1.9 fixes focus rings in dark mode.
1.8 adds the bottom tab bar for mobile.
- Maya renamed "Spring launch"
- Jon commented on Board
- Ana uploaded 3 files
- Sam closed 4 tasks
- Lee joined the workspace
- Priya moved a card
- Tom archived a project
- Kim invited 2 people
- Raj updated billing
Floating dock
Root .sf-dock[data-sf-dock]. Icons magnify toward the pointer (and the focused item) and hop when clicked. Disabled for touch and reduced motion.
Floating action button
Root .sf-fab[data-sf-fab]; actions pop out with a staggered spring. data-direction="left" fans sideways, --fixed pins to the corner. Emits soft:fab.
Table of contents
Root nav.sf-toc[data-sf-scrollspy="#scroller"]. The sliding marker follows the section in view; links scroll the container smoothly. Omit the value to spy on the window.
Introduction
Good navigation is mostly invisible. People notice it only when it fails, so the job is to be calm, predictable and quick.
Principles
Keep labels short. Show where you are. Make the next step obvious, and never move things around between visits.
Patterns
Sidebars for depth, tabs for peers, breadcrumbs for hierarchy, and a command palette for everything else.
Motion
A little spring communicates cause and effect. Keep it short, and honour reduced motion.
Wrap up
That is all. Go build something calm.
Command-bar search
Root .sf-searchbar[data-sf-searchbar]: a combobox with a live fuzzy results dropdown. Arrow keys, Enter and Escape work; emits soft:search-select.
Workspace and account switcher
Root .sf-dropdown.sf-switcher[data-sf-menu][data-sf-menu-sync]. Radio items switch workspaces and update the trigger; the footer holds account actions.