Navigation by device
The same destinations in every size class, placed where the hand or the pointer already is: a bottom bar on phones, a rail on tablets, a sidebar on desktops. Panels follow the same logic.
Phones
- Bottom app bar, 60 px plus the safe area: What’s new, Assistant, Edit, Account and Menu, at the end. What’s new carries the count of new notices; a red dot on Menu says something inside it needs a look.
- Menu opens the whole sidebar as a drawer from the left, 304 px wide and never more than 84% of the window, over a scrim. Choosing a destination or touching the scrim closes it.
- Panels are bottom sheets with a handle, from under the top bar: details, new orders, notifications and the assistant. There is no scrim. They close by swiping down from the handle or the header, with the close button, or with Escape.
- The top bar is compact, 56 px: the brand, All accounts and search. Search opens across the whole bar, with Cancel. The page title moves to a header at the top of the page.
Tablets
- A rail, 60 px, always in place: icons only, with the destination’s name on touch and hold.
- Expanding the rail opens the full sidebar over the content, with a scrim. The columns do not move. Choosing a destination or touching the scrim folds it back.
- Panels are side sheets from the right, 402 px, under the top bar and with no scrim: the overview stays in view and the row they came from stays marked. They slide in from the right edge, all the way, on the default spatial spring, and slide back out the same way. They fit from 768 px up, so tablets and desktops share them. All six are in Patterns › Panels.
- The top bar keeps one line. Search gives up width first, down to 150 px, and its results open toward the left at no less than 320 px.
Desktops
- The sidebar sits beside the content, 224 px, with labels and account details.
- Collapsing it leaves the rail, 60 px, and gives its width to the columns: every card widens, and the cards move with the same spring as the sidebar. The choice is remembered.
- Panels are side sheets from the right, under the top bar and with no scrim, as on tablets.
Changing size class
- Navigation changes place at once. When the window crosses a breakpoint, the sidebar becomes a rail or a bottom bar without animating: motion between two layouts that never coexist explains nothing.
- Each class starts from its resting state. The tablet rail is folded, the phone drawer closed, and a layout edit in progress ends without saving.
-
One mechanism decides the class: the breakpoints in the tokens, through CSS media queries or
sizeClassesin scripts. Nothing measures the window on its own.
Touch
- Every target is at least 48 px on touch screens, even where the visible control is smaller: the hit area grows, the drawing does not.
-
Nothing depends on hover. On screens without it (
hover: none), tooltips open on touch and the hover highlight does not stick after a tap. - Drag handles get a larger hit area, and the handles of two neighboring cards share the gap between them so they never overlap.
Tokens
| Token | Value |
|---|---|
--sonar-layout-sidebar
Full navigation beside the content on desktops. On tablets it opens over the content. |
224px
|
--sonar-layout-rail
Navigation as icons only: the rail on tablets and the collapsed sidebar on desktops. |
60px
|
--sonar-layout-drawer
The sidebar as a drawer on phones. It never covers more than 84% of the window. |
304px
|
--sonar-layout-bar-top-compact
|
56px
|
--sonar-layout-bar-top-medium
|
68px
|
--sonar-layout-bar-bottom
Bottom app bar on phones: Alerts, Assistant, Edit, Account and Menu. |
60px
|
--sonar-layout-bar-footer
Footer and edit bar on tablets and desktops. |
46px
|
--sonar-layout-touch-target
Minimum hit area on touch screens. |
48px
|