# Sidebar
The side panel of an application: the logo, search, labeled groups of links with children, the user, and at the foot a button that keeps it open, keeps it a column of icons, or lets it open over the page when pointed at.
Block: `smbk-sidebar`. Status: candidate. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.
## Options
| Axis | Values | Default | Meaning |
|---|---|---|---|
| `look` | `floating`, `flat` | `floating` | Floating is the raised panel with its corner, rim and shadow, which the page keeps a little way in from the window's edges. Flat is square and on the page's own surface, with no shadow and a hairline along its end edge, for a sidebar that runs flush to the window's edges. Figma calls this "Style". |
| `size` | `md`, `sm` | `md` | md rows are 40 tall with 16 px text and 20 px icons, their children 32 tall with 14 px text unless child is md. sm rows are all 32 tall with 14 px text and 16 px icons, for a denser application. The column, the logo, search, user and foot cells keep their size. Figma: the item's Size, md and sm. |
| `child` | `sm`, `md` | `sm` | How tall an item's children are at the medium size. sm draws them a step smaller than their parent, 32 tall with 14 px text. md draws them as tall as their parent, 40 tall with 16 px text, for children that matter as much as the item above them. Their labels start in the same place either way. At the small size every row is small, so md changes nothing there. Figma: the child item's Size, sm and md. |
| `width` | `md`, `sm` | `md` | How wide the open panel is. md is the sidebar width. sm is the 240 width, for a dense application's list of pages beside its work. Only the open panel narrows: the column of icons, its cells and its rows keep their size. Not yet drawn in Figma, which draws the md width only. |
| `display` | `auto`, `expanded`, `collapsed` | `auto` | Auto: a column of icons that opens over the page while it is pointed at or holds keyboard focus. Expanded: kept open, taking its room beside the page. Collapsed: kept as the column, whose items with children open flyouts. The button at the foot steps through them in that order. Figma: Display=Expanded, Collapsed; auto is not drawn in Figma. |
| `collapsed` | on / off | off | The column's look: icons only. The wrapper sets it when the display is collapsed, or auto and not open; plain markup sets it the same way. |
| `open` | on / off | off | The auto display is open over the page, as when pointed at. No effect on the other two. |
Parts: `smbk-sidebar__panel`, `smbk-sidebar__logo`, `smbk-sidebar__brand`, `smbk-sidebar__brand-logo`, `smbk-sidebar__brand-mark`, `smbk-sidebar__search`, `smbk-sidebar__search-field`, `smbk-sidebar__search-button`, `smbk-sidebar__nav`, `smbk-sidebar__section`, `smbk-sidebar__group-label`, `smbk-sidebar__group-title`, `smbk-sidebar__list`, `smbk-sidebar__group`, `smbk-sidebar__item`, `smbk-sidebar__item-body`, `smbk-sidebar__item-icon`, `smbk-sidebar__item-label`, `smbk-sidebar__item-said`, `smbk-sidebar__item-marks`, `smbk-sidebar__item-count`, `smbk-sidebar__item-dot`, `smbk-sidebar__item-caret`, `smbk-sidebar__children`, `smbk-sidebar__flyout`, `smbk-sidebar__flyout-list`, `smbk-sidebar__footer`, `smbk-sidebar__user`, `smbk-sidebar__user-name`, `smbk-sidebar__user-detail`, `smbk-sidebar__foot`, `smbk-sidebar__toggle`, `smbk-sidebar__glide`
## Markup
```html
```
## React
```tsx
import { Sidebar } from './design-system/components/sidebar/sidebar.js';
import { SearchField } from './design-system/components/search-field/search-field.js';
import { Avatar } from './design-system/components/avatar/avatar.js';
import { Skeleton } from './design-system/components/skeleton/skeleton.js';
{}} />} onSearch={() => {}} avatar={} userName="Maya Chen" userDetail="maya@example.com" />
```
## Stylesheet
```css
/* smbk-sidebar — Sidebar. Figma "Sidebar" 4732:56128 (Style: Floating, Flat; Display: Expanded,
* Collapsed; Logo, Search, User Profile and Collapsible booleans) over "SidebarNavItem" 4240:29552
* (Size: md, sm). It replaces Figma's older sidebar with a title and its collapse button at the top.
*
* The block is the room the sidebar keeps beside the page; the panel inside it is the raised
* surface: the logo, search, labeled groups of navigation items with children, the user, and
* the collapse button at the foot. Three displays: auto, a column of icons that opens over the
* page while pointed at or focused; kept open; kept closed. The collapsed flag is the column's
* look (the wrapper sets it: kept closed, or auto at rest) and the open flag the open auto panel.
* Opening and closing are built to be smooth, on the fold purpose: every row keeps its height, what
* the column hides folds with the panel instead of vanishing, the words fade through a slight blur,
* and the logo's mark glides into the whole logo (the wrapper measures and moves it). */
/* ---- the room ----
As wide as the panel when it is kept open or closed. In auto it is always the column's width,
whether the panel rests in it or lies open over the page: every cell of the column is a medium
control between two medium insets, the panel's edge drawn inside. The column itself is that wide too,
rather than as wide as its content, so words still fading out while it closes never widen the
width it closes to. */
.smbk-sidebar {
position: relative;
display: flex;
flex-shrink: 0;
height: 100%;
}
.smbk-sidebar--display-auto,
.smbk-sidebar--collapsed > .smbk-sidebar__panel {
width: calc(var(--smbk-space-inset-md) + var(--smbk-size-control-md) + var(--smbk-space-inset-md));
}
/* ---- the panel ----
Its edge is drawn inside it, as Figma draws it (an outline drawn over its own rim, taking no
room), so every cell sits where Figma puts it: the logo cell's divider meets the foot of the app
bar beside it, and the column is 56 wide. */
.smbk-sidebar__panel {
box-sizing: border-box;
display: flex;
flex: none;
flex-direction: column;
width: var(--smbk-size-sidebar-width);
height: 100%;
outline: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
outline-offset: calc(-1 * var(--smbk-border-width-hairline));
border-radius: var(--smbk-radius-container-sm);
background: var(--smbk-color-surface-default);
color: var(--smbk-color-text-default);
box-shadow: var(--smbk-elevation-raised);
interpolate-size: allow-keywords;
transition: box-shadow var(--smbk-motion-state-duration) var(--smbk-motion-state-easing);
}
/* The small width: the open panel 240 wide, for a dense application's list of pages. The column keeps its own
width, so the rule steps aside while the sidebar is the column. */
.smbk-sidebar--width-sm:not(.smbk-sidebar--collapsed) > .smbk-sidebar__panel {
width: var(--smbk-size-width-240);
}
/* Flat: square and on the page's own surface, with no shadow and no rim, a hairline along its end
edge only. The hairline is drawn inside the panel, as Figma draws it, so the column keeps its width. */
.smbk-sidebar--look-flat > .smbk-sidebar__panel {
position: relative;
outline: none;
border-radius: 0;
background: var(--smbk-color-surface-canvas);
box-shadow: none;
}
.smbk-sidebar--look-flat > .smbk-sidebar__panel::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-end: 0;
border-inline-end: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
pointer-events: none;
}
/* Only the list gives way when the panel is short; every cell keeps its height. */
.smbk-sidebar__panel > :not(.smbk-sidebar__nav) {
flex-shrink: 0;
}
/* Auto, open: over the page, on the overlay layer, with the floating panels' shadow. It stays
there while it folds back, and returns to the room once the column has landed. */
.smbk-sidebar--display-auto.smbk-sidebar--open > .smbk-sidebar__panel,
.smbk-sidebar--display-auto > .smbk-sidebar__panel[data-folding] {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
z-index: var(--smbk-layer-overlay);
}
.smbk-sidebar--display-auto.smbk-sidebar--open > .smbk-sidebar__panel {
box-shadow: var(--smbk-elevation-overlay);
}
/* Kept open from the open auto display, the room widens under the panel; meanwhile the panel stays
above the page it still overlaps. */
.smbk-sidebar[data-gliding] > .smbk-sidebar__panel {
position: relative;
z-index: var(--smbk-layer-overlay);
}
/* ---- the cells: each as tall as the app bar beside it (a medium control between two medium
insets; Figma draws them 56 tall), and in the column each holds a medium control square. ---- */
/* The logo cell holds a small control tall box with the logo a large icon tall inside it. Open,
the whole logo; in the column, the mark alone, centered in the cell's square. Both are drawn in
one place and the stylesheet shows one; while the panel folds, the whole logo shows and the
wrapper glides its mark to or from the lone mark's place as its words fade, so the one turns
into the other. */
.smbk-sidebar__logo {
box-sizing: border-box;
display: flex;
align-items: center;
height: calc(var(--smbk-size-control-md) + var(--smbk-space-inset-md) + var(--smbk-space-inset-md));
padding: var(--smbk-space-inset-md);
}
.smbk-sidebar__brand {
box-sizing: border-box;
display: grid;
align-items: center;
justify-items: start;
padding: var(--smbk-size-4) var(--smbk-size-8);
border-radius: var(--smbk-radius-control-xs);
color: var(--smbk-color-text-default);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-sidebar__brand:focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
}
.smbk-sidebar :is(.smbk-sidebar__brand-logo, .smbk-sidebar__brand-mark) {
grid-area: 1 / 1;
height: var(--smbk-size-icon-lg);
width: auto;
}
.smbk-sidebar__brand-mark {
visibility: hidden;
}
.smbk-sidebar--collapsed .smbk-sidebar__brand {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
width: var(--smbk-size-control-md);
padding-inline: 0;
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel:not([data-folding="closing"]) .smbk-sidebar__brand-logo {
visibility: hidden;
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel:not([data-folding="closing"]) .smbk-sidebar__brand-mark {
visibility: visible;
}
/* The search cell: the search field when open, a search button in the column. */
.smbk-sidebar__search {
display: flex;
padding: var(--smbk-space-inset-md);
}
.smbk-sidebar__search-field {
flex: 1 1 auto;
min-width: 0;
}
.smbk-sidebar__search-button {
display: none;
}
/* The column's search button and the collapse button at the foot: Figma's small ghost button, its
icon the small one's, in a medium control square, as wide as the column's cells, so they need
no centering. */
.smbk-sidebar :is(.smbk-sidebar__toggle, .smbk-sidebar__search-button) {
width: var(--smbk-size-control-md);
height: var(--smbk-size-control-md);
}
/* The user cell: the avatar and the name a medium inset further in than the cell's own, as Figma
nests them; in the column, the avatar centered in the cell's square. */
.smbk-sidebar__footer {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--smbk-space-inline-lg);
min-height: calc(var(--smbk-size-control-md) + var(--smbk-space-inset-md) + var(--smbk-space-inset-md));
padding: 0 calc(var(--smbk-space-inset-md) + var(--smbk-space-inset-md));
}
.smbk-sidebar__user {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--smbk-space-text-label);
min-width: 0;
}
.smbk-sidebar__user-name {
overflow: hidden;
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
text-overflow: ellipsis;
white-space: nowrap;
}
.smbk-sidebar__user-detail {
overflow: hidden;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-xs-font-family);
font-size: var(--smbk-typography-body-xs-font-size);
font-weight: var(--smbk-typography-body-xs-font-weight);
line-height: var(--smbk-typography-body-xs-line-height);
letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
text-overflow: ellipsis;
white-space: nowrap;
}
/* The foot: the collapse button. Kept open or kept closed, it stays pressed; in auto it
is at rest. */
.smbk-sidebar__foot {
display: flex;
align-items: center;
gap: var(--smbk-space-stack-sm);
padding: var(--smbk-space-inset-md);
}
.smbk-sidebar:is(.smbk-sidebar--display-expanded, .smbk-sidebar--display-collapsed) .smbk-sidebar__toggle {
background: var(--smbk-color-action-ghost-background-pressed);
}
/* ---- the navigation ---- */
.smbk-sidebar__nav {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
min-height: 0;
padding: var(--smbk-space-inset-md);
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--smbk-color-border-subtle) transparent;
}
/* The navigation on its own (SidebarNav), in a drawer: the drawer gives the inset and the scrolling,
so the navigation adds neither and its rows reach the drawer's own edges, as its dividers do. */
.smbk-sidebar__nav:not(.smbk-sidebar__panel > .smbk-sidebar__nav) {
flex: none;
padding: 0;
overflow: visible;
}
.smbk-sidebar__section {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
transition: gap var(--smbk-motion-fold-duration) var(--smbk-motion-fold-easing);
}
/* The group label heads its section: small capitals over the divider's two-line rule. It does not
fold; in the column it folds to no height and grows back with the panel. */
.smbk-sidebar__group-label {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
margin: 0;
padding: var(--smbk-space-inset-md) var(--smbk-space-inset-md) 0;
overflow: clip;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
text-transform: var(--smbk-typography-label-sm-text-transform);
transition-property: block-size, padding-top, opacity, filter, visibility;
transition-duration: var(--smbk-motion-fold-duration), var(--smbk-motion-fold-duration), var(--smbk-motion-fold-label-duration), var(--smbk-motion-fold-label-duration), var(--smbk-motion-fold-duration);
transition-timing-function: var(--smbk-motion-fold-easing), var(--smbk-motion-fold-easing), var(--smbk-motion-fold-label-easing), var(--smbk-motion-fold-label-easing), var(--smbk-motion-fold-easing);
}
/* The two-line rule under a group label: the divider's edges, drawn on the label itself. */
.smbk-sidebar__group-label::after {
content: "";
display: block;
height: 0;
border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-top);
border-bottom: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-bottom);
}
.smbk-sidebar__list {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
margin: 0;
padding: 0;
list-style: none;
}
/* ---- items ----
Figma's item at the medium size, the default: a parent is a medium control tall with Body MD and
a medium icon; a child is the small item, a small control tall with Body SM, as Figma's sidebar
draws its children (or the medium one, with child md, below). A parent's icon sits in a square as big as the row is tall, centered, and the
label starts where the square ends, as in the column, where the item is that square alone; so the
icon never moves between the two. Here the square is the padding before the icon and the gap
after it, each what is left of the square around the icon. Figma draws the edge inside, so the
padding gives the edge's width back. The room above and below is the label's, what is left of the
row around one line, so a label that wraps grows the row and keeps that room over and under it. */
.smbk-sidebar__item {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
min-height: var(--smbk-size-control-md);
margin: 0;
padding: 0 calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) 0 calc((var(--smbk-size-control-md) - var(--smbk-size-icon-md)) / 2 - var(--smbk-border-width-hairline));
border: var(--smbk-border-width-hairline) solid transparent;
border-radius: var(--smbk-radius-control-sm);
background: transparent;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
letter-spacing: var(--smbk-typography-body-md-letter-spacing);
text-align: left;
text-decoration: none;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-sidebar__item::-webkit-details-marker {
display: none;
}
/* The current item, an open group's parent, and the parent of a group holding the current page,
closed too: the see-through selected fill, which shows on whatever surface the panel is (raised,
flat on the page, or sunken), and the label one weight bolder, so the mark is not a fill alone. */
.smbk-sidebar__item[aria-current="page"],
.smbk-sidebar__group[open] > .smbk-sidebar__item,
.smbk-sidebar__group:has([aria-current="page"]) > .smbk-sidebar__item,
.smbk-sidebar__group--flyout > .smbk-sidebar__item[data-current="true"],
.smbk-sidebar__group--flyout > .smbk-sidebar__item[aria-expanded="true"] {
background: var(--smbk-color-surface-selected);
color: var(--smbk-color-text-default);
font-weight: var(--smbk-typography-body-md-medium-font-weight);
}
/* Pointing at an item raises it, Figma's Hover, a parent and a child alike, and wins over the
selected current and open states above, which Figma draws only at rest; so a collapsed item whose
flyout opens as the pointer arrives shows the hover while pointed at, and takes the selected fill
once the pointer moves into its flyout. */
@media (hover: hover) {
.smbk-sidebar__item:not([aria-disabled="true"]):hover:where(:not([data-glide] *)) {
border-color: var(--smbk-color-border-rim);
background: var(--smbk-color-surface-raised);
color: var(--smbk-color-text-link-hover);
box-shadow: var(--smbk-elevation-control);
}
}
.smbk-sidebar__item:focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
}
.smbk-sidebar__item[aria-disabled="true"] {
color: var(--smbk-color-text-disabled);
pointer-events: none;
}
.smbk-sidebar__item-body {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: calc((var(--smbk-size-control-md) - var(--smbk-size-icon-md)) / 2);
min-width: 0;
}
.smbk-sidebar__item-icon {
flex-shrink: 0;
font-size: var(--smbk-size-icon-md);
}
/* A long label wraps onto more lines instead of being cut short: a side navigation label cut
short can become ambiguous. */
.smbk-sidebar__item-label {
flex: 1 1 auto;
min-width: 0;
margin-block: calc((var(--smbk-size-control-md) - 1lh) / 2 - var(--smbk-border-width-hairline));
overflow-wrap: break-word;
}
/* The label is always as wide as its bolder self: an invisible copy of its words (`data-label`, which the wrapper
writes) at the current item's weight lies under it with no height, so a label that turns bold never pushes
anything beside it. The copy is generated content, hidden, with empty words for assistive technology, so the
label is read once; it wraps as the label does. */
.smbk-sidebar__item-label[data-label]::after {
content: attr(data-label);
content: attr(data-label) / "";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
font-weight: var(--smbk-typography-body-md-medium-font-weight);
pointer-events: none;
user-select: none;
}
.smbk-sidebar__item--child .smbk-sidebar__item-label[data-label]::after,
.smbk-sidebar--size-sm .smbk-sidebar__item-label[data-label]::after {
font-weight: var(--smbk-typography-body-sm-medium-font-weight);
}
.smbk-sidebar__item-caret {
flex-shrink: 0;
font-size: var(--smbk-size-icon-sm);
}
/* A group the wrapper is folding back (data-closing) is still open until its motion ends; its caret turns back as the
motion starts. */
.smbk-sidebar__group[open]:not([data-closing]) > .smbk-sidebar__item .smbk-sidebar__item-caret {
transform: rotate(180deg);
}
/* The room over the children is their own padding, not a margin, so a group folded into the column, its children
held at no height, keeps none of it: the column's rows sit where kept closed puts them. */
.smbk-sidebar__children {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: var(--smbk-space-stack-sm) 0 0;
list-style: none;
transition: visibility var(--smbk-motion-fold-duration);
}
/* A child's label starts under its parent's, where the parent's icon square ends. One line is the
small control's height, a step shorter than its parent's, in Body SM, as Figma draws it; children
touch, and a label that wraps grows its row line by line. */
.smbk-sidebar__item--child {
min-height: var(--smbk-size-control-sm);
padding-left: calc(var(--smbk-size-control-md) - var(--smbk-border-width-hairline));
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.smbk-sidebar__item--child .smbk-sidebar__item-label {
margin-block: calc((var(--smbk-size-control-sm) - 1lh) / 2 - var(--smbk-border-width-hairline));
}
.smbk-sidebar__item--child[aria-current="page"] {
font-weight: var(--smbk-typography-body-sm-medium-font-weight);
}
/* ---- counts and dots: a count (the small badge) and a dot (the status dot) at the end of the row,
before a parent's caret. They are pictures only: their words are a line only a screen reader
hears (the said part), so the name reads "Issues, 18, changed". ---- */
.smbk-sidebar__item-marks {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: var(--smbk-space-inline-sm);
margin-inline-start: var(--smbk-space-inline-md);
}
/* .smbk-sidebar__item-said: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- the tree line: a hairline in the subtle border color down a parent's children, under the
parent's icon, turning toward each child's label at the middle of its first line with a small
rounded corner. It runs on past every child but the last, which ends the line (Figma's Connector,
Continuing and End, read from the list itself). It goes with the children when the panel folds. ---- */
.smbk-sidebar__item--child {
position: relative;
}
.smbk-sidebar__item--child::before,
.smbk-sidebar__children > li:not(:last-child) > .smbk-sidebar__item--child::after {
content: "";
position: absolute;
inset-inline-start: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
top: calc(-1 * var(--smbk-border-width-hairline));
border-inline-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
pointer-events: none;
}
.smbk-sidebar__item--child::before {
width: var(--smbk-space-inset-lg);
height: calc(var(--smbk-size-control-sm) / 2);
border-block-end: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
border-end-start-radius: var(--smbk-radius-4);
}
.smbk-sidebar__children > li:not(:last-child) > .smbk-sidebar__item--child::after {
bottom: calc(-1 * var(--smbk-border-width-hairline));
}
/* ---- children at the medium size (child md): a child as tall as its parent, a medium control in Body MD, as
Figma's medium child item draws it. Its label still starts under its parent's and keeps the row's room over and
under its lines, and the tree line turns toward it at the middle of its first line. The small size draws every
row small, so it changes nothing there. The navigation alone (SidebarNav) carries the class itself, having no
block around it. ---- */
.smbk-sidebar--child-md:not(.smbk-sidebar--size-sm) .smbk-sidebar__item--child {
min-height: var(--smbk-size-control-md);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}
.smbk-sidebar--child-md:not(.smbk-sidebar--size-sm) .smbk-sidebar__item--child .smbk-sidebar__item-label {
margin-block: calc((var(--smbk-size-control-md) - 1lh) / 2 - var(--smbk-border-width-hairline));
}
.smbk-sidebar--child-md:not(.smbk-sidebar--size-sm) .smbk-sidebar__item--child[aria-current="page"],
.smbk-sidebar--child-md:not(.smbk-sidebar--size-sm) .smbk-sidebar__item--child .smbk-sidebar__item-label[data-label]::after {
font-weight: var(--smbk-typography-body-md-medium-font-weight);
}
.smbk-sidebar--child-md:not(.smbk-sidebar--size-sm) .smbk-sidebar__item--child::before {
height: calc(var(--smbk-size-control-md) / 2);
}
/* ---- the small size: every row a small control tall, in Body SM with a small icon. Figma draws the
small item but no small sidebar, so the cells and the column keep their size, and the column's
item is a small control square centered in it. The open row keeps its icon where the column has
it, centered in a medium square at the row's start, so the icon never moves as the panel folds;
the label follows the small square's room after it, and a child's label starts under it. ---- */
.smbk-sidebar--size-sm .smbk-sidebar__item {
min-height: var(--smbk-size-control-sm);
padding-left: calc((var(--smbk-size-control-md) - var(--smbk-size-icon-sm)) / 2 - var(--smbk-border-width-hairline));
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.smbk-sidebar--size-sm .smbk-sidebar__item-body {
gap: calc((var(--smbk-size-control-sm) - var(--smbk-size-icon-sm)) / 2);
}
.smbk-sidebar--size-sm .smbk-sidebar__item-icon {
font-size: var(--smbk-size-icon-sm);
}
.smbk-sidebar--size-sm .smbk-sidebar__item-label {
margin-block: calc((var(--smbk-size-control-sm) - 1lh) / 2 - var(--smbk-border-width-hairline));
}
.smbk-sidebar--size-sm .smbk-sidebar__item--child {
padding-left: calc((var(--smbk-size-control-md) + var(--smbk-size-control-sm)) / 2 - var(--smbk-border-width-hairline));
}
.smbk-sidebar--size-sm :is(.smbk-sidebar__item[aria-current="page"], .smbk-sidebar__group:is([open], :has([aria-current="page"])) > .smbk-sidebar__item, .smbk-sidebar__group--flyout > .smbk-sidebar__item:is([data-current="true"], [aria-expanded="true"])) {
font-weight: var(--smbk-typography-body-sm-medium-font-weight);
}
/* ---- the column: icons only ---- */
.smbk-sidebar--collapsed .smbk-sidebar__footer {
justify-content: center;
padding-inline: var(--smbk-space-inset-md);
}
.smbk-sidebar--collapsed .smbk-sidebar__search {
justify-content: center;
}
.smbk-sidebar--collapsed :is(.smbk-sidebar__search-field, .smbk-sidebar__item-label, .smbk-sidebar__item-caret, .smbk-sidebar__user, .smbk-sidebar__item-said, .smbk-sidebar__item-count) {
display: none;
}
/* In the column the count gives way to the icon's name, and the dot sits on the icon's top end corner. */
.smbk-sidebar--collapsed .smbk-sidebar__item:not(.smbk-sidebar__item--child) {
position: relative;
}
.smbk-sidebar--collapsed .smbk-sidebar__item:not(.smbk-sidebar__item--child) .smbk-sidebar__item-marks {
position: absolute;
inset-block-start: var(--smbk-space-inset-md);
inset-inline-end: var(--smbk-space-inset-md);
margin: 0;
}
.smbk-sidebar--size-sm.smbk-sidebar--collapsed .smbk-sidebar__item:not(.smbk-sidebar__item--child) .smbk-sidebar__item-marks {
inset-block-start: var(--smbk-space-inset-xs);
inset-inline-end: var(--smbk-space-inset-xs);
}
/* A flyout's opener holds its dot alone, the same way. */
.smbk-sidebar__group--flyout > .smbk-sidebar__item > .smbk-sidebar__item-body > .smbk-sidebar__item-dot {
position: absolute;
inset-block-start: var(--smbk-space-inset-md);
inset-inline-end: var(--smbk-space-inset-md);
}
.smbk-sidebar--size-sm .smbk-sidebar__group--flyout > .smbk-sidebar__item > .smbk-sidebar__item-body > .smbk-sidebar__item-dot {
inset-block-start: var(--smbk-space-inset-xs);
inset-inline-end: var(--smbk-space-inset-xs);
}
.smbk-sidebar--collapsed .smbk-sidebar__search-button {
display: inline-flex;
}
/* Every item is the icon's square alone, the icon centered, as Figma's collapsed item is; the
padding before the icon is the open row's, so the icon stays where it was. At the small size the
square is a small control, centered in the column, its icon where the open row has it. */
.smbk-sidebar--collapsed .smbk-sidebar__item:not(.smbk-sidebar__item--child) {
width: var(--smbk-size-control-md);
height: var(--smbk-size-control-md);
}
.smbk-sidebar--size-sm.smbk-sidebar--collapsed .smbk-sidebar__item:not(.smbk-sidebar__item--child) {
width: var(--smbk-size-control-sm);
height: var(--smbk-size-control-sm);
margin-inline: auto;
padding-left: calc((var(--smbk-size-control-sm) - var(--smbk-size-icon-sm)) / 2 - var(--smbk-border-width-hairline));
}
.smbk-sidebar--collapsed .smbk-sidebar__item-body {
flex: none;
}
/* In auto the column keeps the open panel's markup, so it can open in place without losing focus:
an item with children is still its disclosure. The group holding the current page is marked,
as a flyout's opener is when kept closed, and an open group that does not hold it is not. */
.smbk-sidebar--collapsed .smbk-sidebar__group:has([aria-current="page"]) > .smbk-sidebar__item:not(:hover) {
background: var(--smbk-color-surface-selected);
color: var(--smbk-color-text-default);
}
.smbk-sidebar--collapsed .smbk-sidebar__group[open]:not(:has([aria-current="page"])) > .smbk-sidebar__item:not(:hover) {
background: transparent;
color: var(--smbk-color-text-subtle);
}
/* A touch screen has no hover, only the one a tap leaves behind: there the column keeps these marks
on a tapped item too, rather than dropping to its resting look. */
@media (hover: none) {
.smbk-sidebar--collapsed .smbk-sidebar__group:has([aria-current="page"]) > .smbk-sidebar__item:hover {
background: var(--smbk-color-surface-selected);
color: var(--smbk-color-text-default);
}
.smbk-sidebar--collapsed .smbk-sidebar__group[open]:not(:has([aria-current="page"])) > .smbk-sidebar__item:hover {
background: transparent;
color: var(--smbk-color-text-subtle);
}
}
/* ---- the glide: with the wrapper, the raised hover is one part that slides to the item under the mouse
(glide.ts) instead of each item raising on its own: a parent and its children are one list, so the
pointer in the gap between rows, between groups or in the padding still raises the nearest item. The
wrapper adds it as the navigation's first child and marks the navigation data-glide ("lit" while it
shows) and the lit item data-glide-lit; the sections are lifted over it. The lit item draws no fill of
its own, so the raised part shows through even on the current item, and takes the hover's text color.
It fades in where it lands and out as the pointer leaves, slides and takes a child's or the column's
size with the feedback purpose, and lands at once when the panel folds; under reduced motion it lands
at once and only fades. A touch screen draws none. The column's flyout is the dropdown's panel and
glides as the dropdown does. ---- */
:where(.smbk-sidebar__nav[data-glide]) {
position: relative;
}
:where(.smbk-sidebar__nav[data-glide] > :not(.smbk-sidebar__glide)) {
position: relative;
}
.smbk-sidebar__glide {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
border-radius: var(--smbk-radius-control-sm);
background: var(--smbk-color-surface-raised);
box-shadow: var(--smbk-elevation-control);
opacity: 0;
pointer-events: none;
transition-property: translate, width, height, opacity;
transition-duration: var(--smbk-motion-feedback-duration);
transition-timing-function: var(--smbk-motion-feedback-easing);
}
.smbk-sidebar__nav[data-glide="lit"] > .smbk-sidebar__glide {
opacity: 1;
}
.smbk-sidebar__glide[data-instant] {
transition-property: opacity;
}
.smbk-sidebar .smbk-sidebar__nav[data-glide] .smbk-sidebar__item[data-glide-lit]:not([aria-disabled="true"]),
.smbk-sidebar__nav[data-glide] .smbk-sidebar__item[data-glide-lit]:not([aria-disabled="true"]) {
background: transparent;
color: var(--smbk-color-text-link-hover);
}
@media (prefers-reduced-motion: reduce) {
.smbk-sidebar__glide {
transition-property: opacity;
}
}
@media (hover: none) {
.smbk-sidebar__glide {
display: none;
}
}
/* An open group's children and the group labels fold to no height and grow back with the panel, on
its fold purpose, so the rows under them move smoothly instead of jumping; the room between a label
and its list folds with them, and a label's words fade through the fold's blur as the other words
do. They are hidden from assistive technology and the keyboard meanwhile. */
.smbk-sidebar--collapsed .smbk-sidebar__children {
visibility: hidden;
}
.smbk-sidebar--collapsed .smbk-sidebar__group[open]::details-content {
block-size: 0;
}
.smbk-sidebar--collapsed .smbk-sidebar__section {
gap: 0;
}
.smbk-sidebar--collapsed .smbk-sidebar__group-label {
block-size: 0;
padding-top: 0;
opacity: 0;
filter: blur(var(--smbk-motion-fold-blur));
visibility: hidden;
}
/* Coming back, a group label's words fade in over the last part of the fold, as the other words do. */
.smbk-sidebar:not(.smbk-sidebar--collapsed) .smbk-sidebar__group-label {
transition-delay: 0s, 0s, calc(var(--smbk-motion-fold-duration) - var(--smbk-motion-fold-label-duration)), calc(var(--smbk-motion-fold-duration) - var(--smbk-motion-fold-label-duration)), 0s;
}
/* While the panel folds, the wrapper moves the label's height and padding with it (data-folding), measured at both
ends, so it folds in every browser; the stylesheet only fades its words. */
.smbk-sidebar__panel[data-folding] .smbk-sidebar__group-label {
transition-property: opacity, filter, visibility;
transition-duration: var(--smbk-motion-fold-label-duration), var(--smbk-motion-fold-label-duration), var(--smbk-motion-fold-duration);
transition-timing-function: var(--smbk-motion-fold-label-easing), var(--smbk-motion-fold-label-easing), var(--smbk-motion-fold-easing);
transition-delay: 0s;
}
.smbk-sidebar:not(.smbk-sidebar--collapsed) > .smbk-sidebar__panel[data-folding] .smbk-sidebar__group-label {
transition-delay: calc(var(--smbk-motion-fold-duration) - var(--smbk-motion-fold-label-duration)), calc(var(--smbk-motion-fold-duration) - var(--smbk-motion-fold-label-duration)), 0s;
}
/* ---- motion: a group's children unfold as an accordion's item does, with the expand purpose: they
grow from no height to their own as they fade in from its slight blur, and fold back the same way,
and the caret turns with them. The React wrapper moves them, the same in every browser, and marks
the navigation data-motion once it runs; while a group moves (data-moving) it is clipped to a focus
ring's reach. Markup written by hand is moved by the stylesheet alone where the browser can animate
to a natural height, and opens at once elsewhere. Under reduced motion the height lands at once and
the fade still plays. While the panel folds, the groups move with it on the fold purpose instead
(folding, below), and the column's own fold of an open group never moves on its own. ---- */
.smbk-sidebar__item-caret {
transition: transform var(--smbk-motion-expand-duration) var(--smbk-motion-expand-easing);
}
.smbk-sidebar__group::details-content {
overflow: clip;
overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
}
.smbk-sidebar__group[data-moving] {
overflow: clip;
overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
}
@supports (interpolate-size: allow-keywords) {
.smbk-sidebar__nav:not([data-motion]) .smbk-sidebar__group:not(.smbk-sidebar--collapsed *) {
interpolate-size: allow-keywords;
}
.smbk-sidebar__nav:not([data-motion]) .smbk-sidebar__group:not(.smbk-sidebar--collapsed *)::details-content {
block-size: 0;
opacity: 0;
filter: blur(var(--smbk-motion-expand-blur));
transition-property: block-size, opacity, filter, content-visibility;
transition-duration: var(--smbk-motion-expand-duration);
transition-timing-function: var(--smbk-motion-expand-easing);
transition-behavior: allow-discrete;
}
.smbk-sidebar__nav:not([data-motion]) .smbk-sidebar__group[open]:not(.smbk-sidebar--collapsed *)::details-content {
block-size: auto;
opacity: 1;
filter: none;
}
/* Under reduced motion the height steps: at once as a group opens, and only once it has faded as it closes. */
@media (prefers-reduced-motion: reduce) {
.smbk-sidebar__nav:not([data-motion]) .smbk-sidebar__group:not(.smbk-sidebar--collapsed *)::details-content {
transition-duration: 0s, var(--smbk-motion-expand-duration), var(--smbk-motion-expand-duration), var(--smbk-motion-expand-duration);
transition-delay: var(--smbk-motion-expand-duration), 0s, 0s, 0s;
}
.smbk-sidebar__nav:not([data-motion]) .smbk-sidebar__group[open]:not(.smbk-sidebar--collapsed *)::details-content {
transition-delay: 0s;
}
}
}
/* While the panel folds, the wrapper moves a group's height with it (data-folding, below): an open group closing into
the column keeps its children drawn, clipped by the group, until it lands. */
.smbk-sidebar__panel[data-folding] .smbk-sidebar__group {
overflow: clip;
overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel[data-folding="closing"] .smbk-sidebar__group[open]::details-content {
block-size: auto;
}
/* ---- folding: when the panel opens or closes, its width glides from where it was to where it
goes (the wrapper measures both ends and runs it with the fold purpose both ways, slow to leave
and slow to land, so a press on the way turns it round) and the wrapper marks the panel with
data-folding while it moves. Every row keeps its height and no label rewraps or cuts itself
short on the way. Closing, the words, the carets and the user's name fade into the fold's slight
blur over its first part, before the rows narrow under them; the items stay rows that narrow
with the panel and become squares once it has landed (the same size by then); the user cell
holds its avatar at the start, and the wrapper glides it into the center once the column has
landed. Opening, the words come back out of the blur over the last part, once the rows are
nearly wide again. A restored or programmatic change lands at once. Under reduced motion the
width lands at once and an opening's words still fade in, at once; a closing lands whole. ---- */
.smbk-sidebar__panel[data-folding] {
overflow: clip;
overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
}
.smbk-sidebar__panel[data-folding] :is(.smbk-sidebar__group-label, .smbk-sidebar__item-label) {
white-space: nowrap;
}
.smbk-sidebar__panel[data-folding] :is(.smbk-sidebar__user-name, .smbk-sidebar__user-detail) {
text-overflow: clip;
}
.smbk-sidebar__panel[data-folding="opening"] :is(.smbk-sidebar__search-field, .smbk-sidebar__item-label, .smbk-sidebar__item-caret, .smbk-sidebar__user) {
transition-property: opacity, filter;
transition-duration: var(--smbk-motion-fold-label-duration);
transition-timing-function: var(--smbk-motion-fold-label-easing);
transition-delay: calc(var(--smbk-motion-fold-duration) - var(--smbk-motion-fold-label-duration));
}
@starting-style {
.smbk-sidebar__panel[data-folding="opening"] :is(.smbk-sidebar__search-field, .smbk-sidebar__item-label, .smbk-sidebar__item-caret, .smbk-sidebar__user) {
opacity: 0;
filter: blur(var(--smbk-motion-fold-blur));
}
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel[data-folding="closing"] :is(.smbk-sidebar__search, .smbk-sidebar__footer) {
justify-content: flex-start;
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel[data-folding="closing"] .smbk-sidebar__item {
width: 100%;
}
.smbk-sidebar--size-sm.smbk-sidebar--collapsed > .smbk-sidebar__panel[data-folding="closing"] .smbk-sidebar__item {
margin-inline: 0;
padding-left: calc((var(--smbk-size-control-md) - var(--smbk-size-icon-sm)) / 2 - var(--smbk-border-width-hairline));
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel[data-folding="closing"] .smbk-sidebar__item-body {
flex: 1 1 auto;
}
.smbk-sidebar--collapsed > .smbk-sidebar__panel[data-folding="closing"] :is(.smbk-sidebar__item-label, .smbk-sidebar__item-caret, .smbk-sidebar__user) {
display: block;
opacity: 0;
filter: blur(var(--smbk-motion-fold-blur));
transition-property: opacity, filter;
transition-duration: var(--smbk-motion-fold-label-duration);
transition-timing-function: var(--smbk-motion-fold-label-easing);
}
/* Under reduced motion nothing travels or changes size: the parts the column hides come and go at once, and the
words that come back as the panel opens fade in at once. */
@media (prefers-reduced-motion: reduce) {
.smbk-sidebar :is(.smbk-sidebar__panel, .smbk-sidebar__item-caret, .smbk-sidebar__children, .smbk-sidebar__section) {
transition: none;
}
.smbk-sidebar .smbk-sidebar__group-label {
transition-property: opacity, filter;
transition-duration: var(--smbk-motion-fold-label-duration);
transition-timing-function: var(--smbk-motion-fold-label-easing);
}
.smbk-sidebar:not(.smbk-sidebar--collapsed) .smbk-sidebar__group-label,
.smbk-sidebar:not(.smbk-sidebar--collapsed) > .smbk-sidebar__panel[data-folding] .smbk-sidebar__group-label {
transition-delay: 0s;
}
.smbk-sidebar__panel[data-folding="opening"] :is(.smbk-sidebar__search-field, .smbk-sidebar__item-label, .smbk-sidebar__item-caret, .smbk-sidebar__user) {
transition-delay: 0s;
}
}
/* ---- kept closed: an item with children opens them in a flyout beside the column ----
The panel carries the dropdown's own classes, so it looks like every other menu; here it is
placed fixed beside the column (the sidebar's script sets its top, left and height from the
item's position, using the panel's start margin as the gap), above the page, scrolling inside
itself when its list is longer than the window. While it shows, the script lifts it in the
dropdown's layer into the browser's top layer (floating.css), since the navigation around it
is a stacking context of its own; the z-index here serves where there is no top layer. The
pointer crossing the gap is given a moment by the script before the flyout closes. */
.smbk-sidebar__group--flyout {
position: relative;
}
.smbk-sidebar__flyout {
position: fixed;
z-index: var(--smbk-layer-overlay);
margin: 0;
margin-inline-start: var(--smbk-space-inline-sm);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--smbk-color-border-subtle) transparent;
}
/* A swap from one flyout to the next is instant, both ways; the first and the last still ease. */
.smbk-sidebar__flyout[data-swap] {
transition: none;
}
.smbk-sidebar__flyout-list {
display: flex;
flex-direction: column;
gap: var(--smbk-space-inline-xs);
margin: 0;
padding: 0;
list-style: none;
}
/* A flyout's link to the current page: the selected surface and its words a weight bolder, drawn by the dropdown's own
rule for a current link (dropdown/dropdown.css). */
/* ---- touch: the logo's link and every row take an invisible press area ----
On a touch screen an invisible area, centred on the logo's link and on each row, takes the press out to the
comfortable target in each direction it falls short of it. A parent's children touch: between two of them each
keeps its own edge, and the first and the last reach only halfway to the parent and the next row. A child draws
its tree line with both of its own pseudo-elements, and its label keeps its ::after for its bolder copy, which
takes no press, so its area hangs from its label's ::before, over the whole row. The panel cuts the areas off at
its edge. What is drawn and every place stay as they are. */
@media (pointer: coarse) {
.smbk-sidebar__brand,
.smbk-sidebar__item {
position: relative;
}
.smbk-sidebar__brand::after,
.smbk-sidebar__item:not(.smbk-sidebar__item--child)::after,
.smbk-sidebar__item--child > .smbk-sidebar__item-label::before {
content: '';
position: absolute;
inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
}
/* Rows one under another in a list, and a parent over its open children, reach only halfway into the gap. */
.smbk-sidebar__list > li + li > .smbk-sidebar__item::after,
.smbk-sidebar__list > li + li > .smbk-sidebar__group > .smbk-sidebar__item::after {
inset-block-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-sm) / -2);
}
.smbk-sidebar__list > li:has(+ li) > .smbk-sidebar__item::after,
.smbk-sidebar__list > li:has(+ li) > .smbk-sidebar__group > .smbk-sidebar__item::after,
.smbk-sidebar__group[open] > .smbk-sidebar__item::after {
inset-block-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-sm) / -2);
}
/* Two sections with no label showing between them (none given, or folded in the column): the last row of one and
the first of the next stop halfway into the gap. */
:is(.smbk-sidebar--collapsed .smbk-sidebar__section, .smbk-sidebar__section) + :is(.smbk-sidebar--collapsed .smbk-sidebar__section, .smbk-sidebar__section:not(:has(> .smbk-sidebar__group-label))) > .smbk-sidebar__list > li:first-child > :is(.smbk-sidebar__item, .smbk-sidebar__group > .smbk-sidebar__item)::after {
inset-block-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-sm) / -2);
}
.smbk-sidebar--collapsed .smbk-sidebar__section:has(+ .smbk-sidebar__section) > .smbk-sidebar__list > li:last-child > :is(.smbk-sidebar__item, .smbk-sidebar__group > .smbk-sidebar__item)::after,
.smbk-sidebar__section:has(+ .smbk-sidebar__section:not(:has(> .smbk-sidebar__group-label))) > .smbk-sidebar__list > li:last-child > :is(.smbk-sidebar__item, .smbk-sidebar__group > .smbk-sidebar__item)::after {
inset-block-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-sm) / -2);
}
.smbk-sidebar__item--child > .smbk-sidebar__item-label::before {
inset-block: 0;
}
.smbk-sidebar__children > li:first-child > .smbk-sidebar__item--child > .smbk-sidebar__item-label::before {
inset-block-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-sm) / -2);
}
.smbk-sidebar__children > li:last-child > .smbk-sidebar__item--child > .smbk-sidebar__item-label::before {
inset-block-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-sm) / -2);
}
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
/* The current page, and the item whose group holds it while its children are out of sight (closed,
or folded into the column of icons), and a flyout's opener that holds it, filled with Highlight,
whether pointed at or not. */
.smbk-sidebar .smbk-sidebar__item[aria-current="page"],
.smbk-sidebar .smbk-sidebar__group:not([open]):has([aria-current="page"]) > .smbk-sidebar__item,
.smbk-sidebar.smbk-sidebar--collapsed .smbk-sidebar__group:has([aria-current="page"]) > .smbk-sidebar__item,
.smbk-sidebar .smbk-sidebar__group--flyout > .smbk-sidebar__item[data-current="true"],
.smbk-sidebar__flyout .smbk-dropdown__item[aria-current="page"] {
forced-color-adjust: none;
border-color: Highlight;
background: Highlight;
color: HighlightText;
box-shadow: none;
}
.smbk-sidebar__flyout .smbk-dropdown__item[aria-current="page"] .smbk-dropdown__icon {
color: inherit;
}
.smbk-sidebar .smbk-sidebar__item:focus-visible,
.smbk-sidebar__flyout .smbk-dropdown__item:focus-visible {
outline-color: CanvasText;
}
.smbk-sidebar__item[aria-disabled="true"] {
color: GrayText;
}
}
```
## Tokens it reads
```json
{
"space": {
"inset": {
"md": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Padding inside a component, medium."
},
"xl": {
"$type": "dimension",
"$value": "{{space.16}}",
"$description": "Padding inside a component, extra large."
},
"lg": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Padding inside a component, large."
},
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Padding inside a component, extra small."
}
},
"inline": {
"lg": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Gap between things side by side, large."
},
"sm": {
"$type": "dimension",
"$value": "{{space.6}}",
"$description": "Gap between things side by side, small."
},
"md": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Gap between things side by side, medium."
},
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Gap between things side by side, extra small."
}
},
"text": {
"label": {
"$type": "dimension",
"$value": "{{space.0}}",
"$description": "Between a label or title and the line of supporting text right under it, inside a component. None: untrimmed line height already spaces the two lines."
}
},
"stack": {
"sm": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Gap between things stacked one above another, small."
}
}
},
"size": {
"4": {
"$type": "dimension",
"$value": "4px",
"$description": "Raw size step, 4 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
},
"8": {
"$type": "dimension",
"$value": "8px",
"$description": "Raw size step, 8 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
},
"control": {
"md": {
"$type": "dimension",
"$value": "{{size.40}}",
"$description": "Height of a medium control, where controls insert by default: 40 comfortable, 32 compact. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable)."
},
"sm": {
"$type": "dimension",
"$value": "{{size.32}}",
"$description": "Height of a small control: 32 comfortable, 28 compact. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable)."
}
},
"sidebar": {
"width": {
"$type": "dimension",
"$value": "280px",
"$description": "Width of the expanded sidebar. Not a step on any primitive scale."
}
},
"width": {
"240": {
"$type": "dimension",
"$value": "240px",
"$description": "A fixed width of 240 px: a narrow column, a list’s greatest height. Semantic sizes point here."
}
},
"icon": {
"lg": {
"$type": "dimension",
"$value": "{{size.24}}",
"$description": "Icon box, large."
},
"md": {
"$type": "dimension",
"$value": "{{size.20}}",
"$description": "Icon box, medium."
},
"sm": {
"$type": "dimension",
"$value": "{{size.16}}",
"$description": "Icon box, small."
}
},
"target": {
"comfortable": {
"$type": "dimension",
"$value": "{{size.44}}",
"$description": "Comfortable touch target (44)."
}
}
},
"border-width": {
"hairline": {
"$type": "dimension",
"$value": "{{border-width.1}}",
"$description": "Thin lines: dividers and almost every edge."
}
},
"color": {
"border": {
"rim": {
"$type": "color",
"$value": "{{color.alpha.white.90}}",
"$description": "The light rim that makes a surface look lit: fields, chosen pills, cards."
},
"subtle": {
"$type": "color",
"$value": "{{color.grey.300}}",
"$description": "Dividers and quiet edges."
},
"focus": {
"$type": "color",
"$value": "{{color.red.600}}",
"$description": "Keyboard focus ring on controls."
},
"groove-top": {
"$type": "color",
"$value": "{{color.grey.300}}",
"$description": "Upper line of an engraved divider or rim."
},
"groove-bottom": {
"$type": "color",
"$value": "{{color.alpha.white.100}}",
"$description": "Lower line of an engraved divider or rim."
}
},
"surface": {
"default": {
"$type": "color",
"$value": "{{color.grey.100}}",
"$description": "Standard surface: cards, panels, the header."
},
"canvas": {
"$type": "color",
"$value": "{{color.grey.200}}",
"$description": "Page background."
},
"selected": {
"$type": "color",
"$value": "{{color.alpha.grey-800.10}}",
"$description": "The current or chosen item, such as the current page in the sidebar. Translucent, so it shows by the same step on the default, raised, sunken and canvas surfaces."
},
"raised": {
"$type": "color",
"$value": "{{color.grey.50}}",
"$description": "One floor above default: popovers, raised panels."
}
},
"text": {
"default": {
"$type": "color",
"$value": "{{color.grey.900}}",
"$description": "Main text."
},
"subtle": {
"$type": "color",
"$value": "{{color.grey.700}}",
"$description": "Secondary text: descriptions, metadata."
},
"link-hover": {
"$type": "color",
"$value": "{{color.grey.950}}",
"$description": "Link text on hover."
},
"disabled": {
"$type": "color",
"$value": "{{color.grey.500}}",
"$description": "Text in unavailable controls."
}
},
"action": {
"ghost": {
"background-pressed": {
"$type": "color",
"$value": "{{color.action.outline.background-pressed}}",
"$description": "Ghost button: fill while pressed, one step past hover; also the current page in pagination."
}
}
}
},
"radius": {
"4": {
"$type": "dimension",
"$value": "4px",
"$description": "Raw corner step, 4 px. Semantic corners (radius/control, container) point here."
},
"container": {
"sm": {
"$type": "dimension",
"$value": "{{radius.8}}",
"$description": "Corners of cards, panels and dialogs, small."
}
},
"control": {
"xs": {
"$type": "dimension",
"$value": "{{radius.2}}",
"$description": "Corners of controls, extra small."
},
"sm": {
"$type": "dimension",
"$value": "{{radius.4}}",
"$description": "Corners of controls, small."
}
}
},
"elevation": {
"raised": {
"$type": "shadow",
"$value": {
"light": "0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431a",
"dark": "0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026"
}
},
"overlay": {
"$type": "shadow",
"$value": {
"light": "0px 12px 16px 2px #373d431a, 0px 2px 8px 0px #373d4326",
"dark": "0px 12px 16px 2px #00000026, 0px 2px 8px 0px #00000033"
}
},
"control": {
"$type": "shadow",
"$value": {
"light": "0px 0px 1px 0px #373d430d, 0px 1px 2px 0px #373d431a, 0px 2px 4px 0px #373d430d",
"dark": "0px 0px 1px 0px #0000001a, 0px 1px 2px 0px #00000026, 0px 2px 4px 0px #0000001a"
}
}
},
"motion": {
"state": {
"duration": {
"$type": "duration",
"$value": "{{duration.200}}"
},
"easing": {
"$type": "cubicBezier",
"$value": "{{easing.cubic-in-out}}"
}
},
"fold": {
"duration": {
"$type": "duration",
"$value": "{{duration.280}}"
},
"easing": {
"$type": "cubicBezier",
"$value": "{{easing.quart-in-out}}"
},
"label-duration": {
"$type": "duration",
"$value": "{{duration.150}}",
"$description": "How long the words take to fade into the blur, or back out of it."
},
"label-easing": {
"$type": "cubicBezier",
"$value": "{{easing.expo-out}}"
},
"blur": {
"$type": "dimension",
"$value": "2px",
"$description": "How blurred the words are as they finish fading out, and as they start fading in."
}
},
"feedback": {
"duration": {
"$type": "duration",
"$value": "{{duration.150}}"
},
"easing": {
"$type": "cubicBezier",
"$value": "{{easing.expo-out}}"
}
},
"expand": {
"duration": {
"$type": "duration",
"$value": "{{duration.320}}"
},
"easing": {
"$type": "cubicBezier",
"$value": "{{easing.cubic-out}}"
},
"blur": {
"$type": "dimension",
"$value": "2px",
"$description": "How blurred the content is as it starts to open, and as it finishes closing."
}
}
},
"layer": {
"overlay": {
"$type": "number",
"$value": 1200
}
},
"focus": {
"ring": {
"width": {
"$type": "dimension",
"$value": "{{border-width.2}}",
"$description": "Thickness of the focus ring."
},
"offset": {
"$type": "dimension",
"$value": "{{space.2}}",
"$description": "Gap between a control and its focus ring."
}
}
},
"typography": {
"body-sm": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "14px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
},
"body-xs": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "12px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
},
"label-sm": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "12px",
"fontWeight": 500,
"lineHeight": 1.4,
"letterSpacing": "0px"
},
"$description": "Label SM: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
},
"body-md": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
},
"body-md-medium": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "16px",
"fontWeight": 500,
"lineHeight": 1.5,
"letterSpacing": "0px"
},
"$description": "Body MD one weight step bolder, for the current item, so the current item is not shown by colour alone."
},
"body-sm-medium": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": 1.5,
"letterSpacing": "0px"
},
"$description": "Body SM one weight step bolder, for the current item, so the current item is not shown by colour alone."
}
}
}
```
## Purpose
The panel down the side of an application: where the reader is, what else there is, and who they are signed in as. It starts as a column of icons, so the page has the room, and opens over the page when the reader points at it; the reader can keep it open or keep it a column instead. The drawer is what stands in for it on a narrow screen.
## Anatomy
- The block, the room the sidebar keeps beside the page: as wide as the panel when kept open or closed, and always the column's width in auto, where the open panel lies over the page instead of pushing it.
- The panel part, holding the cells below from top to bottom. Floating, the default look, it is a raised panel with rounded corners and a hairline edge drawn inside it, as Figma draws it. Flat, it is square and on the page's own surface, with no shadow and a hairline along its end edge only. Open, it takes the medium width, the default, or the narrower small width (`width="sm"`, the `smbk-sidebar--width-sm` class); the column keeps its own width at either.
- Every cell (logo, search, user, foot) is as tall as the app bar, a medium control between two medium insets, and in the column each holds a medium control square: the items, the search and collapse buttons (Figma's small ghost button in that square), the avatar.
- The logo part (optional, on by default): the brand part, a link home, with the brand logo part when open and the brand mark part in the column, drawn in the same place; then a divider. The logo is the built-in simbolik logo, a site's own shapes (`logoShapes`, the logo's `shapes`), or a site's own picture files with their dark versions (`logoPicture`, the logo's `picture`), the whole logo when open and the mark in the column.
- The search part (optional): the search field part when open, the search button part in the column. No divider follows it, as Figma draws it.
- The nav part: section parts, each an optional group label part (holding the group title part, over a two-line rule) above a list part of items.
- The item part: the item body part (icon part and label part) and, for an item with children, the caret part. At the medium size, the default, a parent is a medium control tall with 16 px text and a 20 px icon; a child item is a small control tall with 14 px text, or with the medium children (`child="md"`, the `smbk-sidebar--child-md` class) a medium control tall with 16 px text, as tall as its parent; it has no icon, and its label starts under its parent's at either size; children touch, and a tree line runs down them from under the parent's icon, turning toward each child's label and ending at the last. Any item or child can end with the item marks part: a count (the item count part, a small badge) and a dot (the item dot part, a status dot), with the item said part, their words for a screen reader. In the column the count gives way and the dot sits on the icon's corner. At the small size every row is a small control tall with 14 px text and a 16 px icon. Kept closed, an item with children is a flyout opener, and its flyout part holds a flyout list part drawn with the dropdown's look, at the small size a small one.
- The footer part (optional): a divider, then the avatar, and the user part with the user name part and the user detail part.
- A divider, then the foot part (optional, on by default), holding the toggle part: the sidebar icon button that steps the display.
## When to use
- The side of an application with more sections than fit in an app bar.
- A page that wants most of the width most of the time, while the reader dips into the navigation now and then, such as the pages of a documentation site.
- Two side by side in a dashboard: a column kept closed, without its foot button, as the parent navigation between the application's areas, and beside it a sidebar for the current area's pages.
## When not to use
- A website. Use the [header](header.md).
- A narrow screen. Use a [drawer](drawer.md) holding the same navigation (the sidebar's navigation on its own).
## Behavior
It has three displays. Auto is where it starts: a column of icons that opens over the page, without moving it, once the mouse has rested on it for the hover open delay, and closes once the mouse has been away for the hover close delay (the motion tokens' hover purpose). Keyboard focus opens it at once and moving focus out of it closes it. A press on its items while it rests opens it and does nothing more, since a touch screen has no hover: opening moves the items, as an open group's children show, so the press must not act on whatever arrives under it. A touch reader taps once to open and again to choose; a press elsewhere closes it again. The logo, the search button and the foot button do not move, so a press on them acts at once, and a key press is never held back. Escape closes it and it stays closed until the pointer or focus has left it. Kept open, it takes its full width beside the page. Kept closed, it stays a column: pointing at an item without children, or moving the keyboard focus to it, shows its name in a tooltip beside the column, which stays while pointed at and goes on Escape; and an item with children opens its children in a flyout beside the column, drawn with the dropdown's look and headed by the item's name: pointing at the item, focusing it or pressing it opens it (never hover only); the pointer has a moment to cross the gap; moving focus out, pressing elsewhere or Escape closes it, and Escape puts focus back on the item. Only one flyout shows at a time, and a swap from one to the next is instant. The flyout stays inside the window and scrolls when its list is longer.
The button at the foot steps through the displays: auto, kept open, kept closed, and back to auto. Kept open or kept closed, the button stays pressed; in auto it is at rest. Stepping back to auto with a pointer leaves it closed until the pointer has left and come back, so it does not open under the very press that asked for auto.
Opening and closing glide, and are built to be smooth: the width moves with the fold motion both ways, slow to leave and slow to land, and a press or the pointer leaving on the way turns it round from where it is; every row keeps its height, so no row jumps; what the column hides (an open group's children and the group labels) grows open from no height with the panel and folds back the same way, in every browser, so the rows under it move smoothly. Closing, the words, the carets and the user's name fade into a slight blur in the first part of the fold, before the rows narrow under them, and the rows become the column's squares once it has landed; opening, the words come back out of the blur in the last part, once the rows are nearly wide again. The icons do not move at all, since a row's icon sits in the same square the column's item is. The logo turns into the other rather than swapping: opening, the whole logo starts with its mark exactly on the lone mark and glides into place as its letters fade in; closing, the reverse. Kept open from the open auto display, the panel is already open, so the room widens under it with the fold motion instead. The open panel's shadow deepens with the state motion. A change that does not come from the reader, such as a page restoring the display it remembered, lands at once. Under reduced motion the width and what the column hides land at once, and the words that come back as the panel opens still fade in.
The current page's item, an open group's item, and the item of a group holding the current page, open or closed, take a see-through gray fill, which shows on whatever surface the panel sits on, and a label one weight bolder, so the mark is not color alone.
Every label keeps the room of its bolder self, so nothing beside it moves as it turns bold (markup written by hand repeats the label's words in its `data-label` attribute). Pointing at any item, a child too, raises it with an edge and a slight shadow, and its words take the link hover color. With the React wrapper, that raised shape is one piece that slides from item to item with the mouse, children and their parent alike, and raises the nearest item when the pointer is between items, between groups or in the padding, where a click presses that item; it fades in where the pointer enters and out as it leaves, follows the panel at once as it folds, and lands without sliding when the reader's system asks for less motion. A column's flyout slides as the dropdown does. A touch screen shows no hover, and plain HTML keeps each item's own.
An item with children opens and closes them in place, using a native disclosure element, and starts open when one of its children is the current page. The children unfold as an accordion's item does, with the expand motion: they grow open as they fade in from a slight blur, and fold back the same way, and the caret turns with them. With the React wrapper they move the same in every browser, and a press on the way turns them round from where they are; in plain HTML, browsers that cannot animate to a natural height open and close them at once. Under reduced motion they open at once and fade in, and fade out before they close. A disabled item with children never opens. In auto, the column keeps the open panel's markup, so an item with children is still its disclosure and opening never swaps the element that has focus. The group holding the current page is marked in the column. A group label is a heading and does nothing when pressed. A long item label wraps onto more lines rather than being cut short.
The display can be kept outside (`display` with `onDisplayChange`, so a page can remember it) or left to the component. Without the foot button (`collapsible` off), the reader cannot change it: the sidebar keeps the display it is given, and a column kept closed still opens flyouts for its items with children. The panel takes the height it is given, and its list scrolls if the items overrun.
The navigation also comes on its own, without the panel (`SidebarNav`): its groups, their labels and items, children folding under their item, the current page marked, always open. It is for a drawer on a phone, where a page's navigation has no column to sit in: the drawer gives the header, the close button, the foot, the inset and the scrolling, so the navigation adds no inset of its own and its rows reach the drawer's edges, as its dividers do. It takes the medium children as the sidebar does (`child="md"`), carrying their class on the navigation itself, so a drawer on a phone shows them as the sidebar beside the page does.
A page that remembers the display should put it back before the first paint, so the sidebar never shows the wrong form for a moment: a small script placed right after the sidebar sets its display modifier class and its collapsed class from the stored value.
## Accessibility
### What it does for you
- The panel is a complementary landmark and the items a navigation landmark, both named by the sidebar's label ("Sidebar" by default), so a page with another complementary region, such as a column beside its content, never has two that sound the same.
- An item's count and dot are part of its name, after a pause: "Issues, 18, changed". In the column of icons they join the icon's name.
- In the column, the icons carry their labels as their names, so the column still reads; open, the labels are visible and the icons are hidden from assistive technology.
- The foot button is named for what pressing it does next ("Keep sidebar open", "Keep sidebar closed", "Open sidebar on hover") and carries whether the panel is open. It is not a pressed toggle, because it has three states, not two; its pressed look is visual only.
- The open auto display follows the rule for content shown on hover or focus: it stays while pointed at or focused, and Escape dismisses it without moving focus. A field's own Escape comes first.
- In the column, the group labels and an open group's children are folded away and hidden from assistive technology and the keyboard until the panel opens.
- Kept closed, an item's name stays its icon's accessible name; the tooltip that shows it is hidden from assistive technology, so it is not read twice.
- Kept closed, an item with children is a button that carries its expanded state and names the flyout it controls; the flyout's links follow it in the tab order. The one whose flyout holds the current page is the current item of the column (aria-current), so it is said, not only shown; inside the flyout the page's own link carries the current-page marker.
- The logo is a link home named by the logo.
- The current page carries the current-page marker. An item with children whose group holds the current page is the current item of its list (aria-current), so a closed group still says where the reader is.
- A disabled item keeps its text and loses its address, which leaves plain text that a screen reader reads as such, not as an unavailable link.
- Group labels are third-level headings unless `headingLevel` gives another, one below the heading the sidebar sits under.
### What you must do
- Give the dot words of its own with `dotLabel` when "changed" does not say what it means.
- Set `headingLevel` when the group labels should sit one level below the heading the sidebar sits under and that is not the third level.
- Give the page's own words for everything the sidebar says by itself, such as the search button's name and the foot button's three names, which keep their English until you do; a page in another language must change them.
- In markup written by hand, add aria-current to the summary of an item with children whose group holds the current page.
### How to test
- Tab through the sidebar: focus opens the panel at once, every item shows a focus ring, and moving focus out closes it. Escape closes it again without moving focus.
- Kept closed, Tab to an item with children and press Enter or Space: its flyout opens, its links come next in the tab order, and Escape closes it and puts focus back on the item.
- With a screen reader, the panel is found as a complementary region and the items as a navigation region, each by its name; the current page is read as current; an item's count and dot are read after its name.
- On a touch screen, one tap on an item of the resting column opens it, and a second tap chooses.
- With text at 200%, a long item label wraps onto more lines rather than being cut short.
- In a forced-color mode, the focus ring and the labels stay, and the current page's label is still one weight bolder.
### Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus through the logo, search, items, user and foot button. Focus entering the auto display opens the panel at once, and focus leaving closes it. |
| Enter | Follows an item's link or the logo's link. |
| Enter or Space | Opens or closes an item's group, opens the flyout of an item with children in a kept-closed column, and presses the search and foot buttons. |
| Escape | Closes the open auto panel and the kept-closed column's flyout, leaving focus where it was; from a flyout, focus returns to its item. A field's own Escape comes first. |
## Usage rules
### Do
- Give every top-level item an icon; in the column it is all that is left.
- Turn the app bar's logo off beside it, so the page shows one logo.
- Keep to two levels.
- Turn the foot button off on a sidebar that must not change, such as a parent column beside a second sidebar.
- Use the flat look for a sidebar that runs flush to the window's top, bottom and start edges, and the floating one where the page keeps a gap around it.
- Use the small size where many items must fit, as in a tool with a long list of places; the medium one everywhere else.
- Use the small width, with the small size, for a dense application's list of pages beside its work, where the work needs the room; the medium width everywhere else.
- Use the medium children where the children are the places the reader goes most, such as the views under each section of a feed; keep them a step smaller, the default, where the parents are the main places and the children a step below them.
### Don't
- Put actions in it. It is for places, not verbs.
- Pass an avatar wider than a medium control. The column shows the same avatar as the open panel, and a wider one hangs over the column's edge.