The top of a website: brand, page links, a call to action and the theme switch, in five looks; the links fold into a menu when they do not fit.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
looksmbk-header--look-<value> | floatingfloating-hugflatsplitcentred | floating | Floating: a raised bar with rounded corners and a hairline edge, the links in the true middle. Floating hug: the same bar only as wide as its content, centered. Flat: a square bar with no edge or shadow, a line along its foot. Split: the brand on an island of its own at the start, the links and the end on one at the end. Centred: the links at the start, the brand in the middle (in a narrow space the theme switch steps aside so the brand can sit in the middle). Figma calls this Style; the app bar has the same looks. |
sizesmbk-header--size-<value> | mdlg | md | How large the page links in the wide bar are. md is Figma's header: the middle navigation item, the extra-small step apart. lg is the large item the large step apart, as the header drew them before. The narrow menu keeps its large items either way. |
backgroundsmbk-header--background-<value> | onoff | on | The bar's own surface. Off drops its fill, edge and shadow so it sits on whatever is behind it; the open menu keeps its surface, as Figma draws the open header only with one. Figma: Background (on by default). |
linesmbk-header--line-<value> | onoff | on | The hairline along the foot of a flat bar. Only the flat look draws it. Figma: Line (on by default). |
foldsmbk-header--fold-<value> | nonelinks | none | Whether the page links have folded away in a wide space too narrow for them: the menu button then shows and opens them under the bar, while the call to action and the theme switch stay. The wrapper measures the row and sets it; markup written by hand sets it the same way. |
expandedsmbk-header--expanded | On or off | Off | The menu is open under the bar: in a narrow space, or in a wide one whose links have folded away. |
zonesmbk-header--zone | On or off | Off | The bar's own room, as Figma draws it: the medium inset above and below a floating bar and a step in from the sides, and its row held to the content width. Off by default, so a page that already leaves room around its header keeps its own. |
frostedsmbk-header--frosted | On or off | Off | A blur behind the bar, strongest at the top and gone by its foot, so what scrolls under it is never read sharply there. For a bar with its background off, or with its own room. Not drawn when the system asks for forced colors. |
Examples
Usage
Brand, the page links in the middle, a call to action and the theme switch, in a wide space.
Group open
In a wide space a link with children opens them in a dropdown over the page. Press it, or focus it and press Enter or the down arrow.
Larger links
The large size sets the page links a step larger and further apart. The bar keeps its height.
Icons in a group
Each child can carry an icon before its label, in the dropdown and in the narrow menu.
Floating hug
The bar only as wide as its content, centered in its space.
Flat
A square bar with no edge or shadow, a line along its foot. The line can be turned off.
Guidelines
Purpose
The bar across the top of a website: the brand, the main page links, a call to action and the theme switch. It is for a site someone reads. The app bar is its cousin for an application someone works in, where the end holds search and the user; the two share their looks and their parts.
When to use
- The top of every page of a website.
When not to use
- An application. Use the app bar, which has the same looks.
- A page with no navigation. A logo alone is not a header.
Usage rules
Do
- Keep to five or six top-level links.
- Make the call to action the one thing the site most wants the reader to do.
- When the page keeps the header stuck to the top of the window as it scrolls, give the page's root a top scroll padding of the header height (
--smbk-size-header-height) and the gap above the bar, so a link reached with Tab or a heading jumped to never lands under the bar. - Turn on the header's own room only where the page leaves none around it, so the space is never doubled.
Don't
- Nest groups more than one level.
- Put a search field in it. That is the app bar.
- Rely on a group's own address. A link with children only opens them, so give the section's overview page a link of its own among the children.
- Pass a second theme switch or call to action for the narrow form. Pass each once: in the narrow form the header shows a medium copy of the theme switch, and the call to action at the medium size across the menu.
Keep to five or six top-level links, so the bar can be read in one sweep.
Ten top-level links crowd the bar, and where they do not fit they all fold away behind the menu button.
Anatomy
- The block, a raised bar with a hairline edge. With the background off it has no fill, edge or shadow and sits on the page behind it; the open menu keeps its surface.
- Five looks, the app bar's: floating (the default), floating hug (only as wide as its content, centered), flat (square, no edge or shadow, a hairline along its foot that the line setting turns off), split (the start on an island of its own, the links and the end on another) and centred (the links at the start, the brand in the middle).
- The panel part: the bar's surface when the bar has its own room or a frost; otherwise it is no box and the block draws the surface.
- The bar part, the row, at least a large control tall: the start part with the brand part and the logo part, then the trail part holding the nav part with the links part (the middle navigation items, or the large ones at the large size) and the end part (the call to action, the theme switch, and in a narrow space or once the links have folded the menu button part; in a narrow space the theme part is the theme switch's medium copy). In a wide space the bar is three columns: the start and the end share the room the links leave equally, so the links sit in the exact middle of the bar however long the brand or the end is. A link with children is a dropdown's opener, and its children are the dropdown's links. A link can carry a count or a dot after its label, as a navigation item does; a link inside the wide bar's dropdown carries neither.
- The logo part is the built-in simbolik logo, or a site's own picture files with their dark versions (
logoPicture, the logo'spicture): the whole logo, large in a wide space and small in a narrow one. Anything else goes in the brand's place (brand). - The second row part, under the bar: a divider and the second row nav part, a row a control tall for further navigation such as line tabs.
- The menu part, under the bar when expanded: a divider, then the menu list part and, in a narrow space, the menu call-to-action part as its last row, every row a medium control tall and a small step apart. A group part opened under a link keeps the same rhythm, its links' words set further in than their link's, so they read as under it.
- The frost parts, three layers behind the bar when frosted.
Behavior
One markup serves both forms. In a wide space the links sit in the middle of the bar and the call to action at the end; when the bar is too short for the two ends to be equal, each keeps the room its content needs and the links move off the exact middle rather than overlap; in a narrow space both move into a menu that the menu button opens under the bar. A link with children shows a caret and opens its children instead of going to its own address, in both forms. In a wide space it opens them in the dropdown, hanging under it over the page, which grows to keep each child on one line; pressing it again, pressing Escape, choosing a link, clicking elsewhere or moving focus away closes it. A header can also be set to open these dropdowns on hover: a group then opens once a mouse rests on its link and closes a moment after the mouse leaves it and its panel, while a press still opens it for touch and the keyboard. In the narrow menu it opens them beneath it in place, and a group holding the current page starts open. A group can also be set to start open. The menu grows open under the bar with the enter motion and closes a little faster with the exit motion, and a group grows open under its item the same way; the wide dropdown drops in from its item. Under reduced motion all of them open and close at once. A page may switch the background while the header is on screen, as a site does when it keeps the bar clear at the top of the page and gives it its surface once content scrolls under it; the surface, edge and shadow then fade in and out with the state motion, under reduced motion too. The form follows the layout switch, so a wrapper can force either.
In a wide space too narrow for the links, the header folds them away rather than cutting anything off: the menu button takes their place and opens them under the bar, while the call to action and the theme switch stay in the row. The header measures its own row whenever its size or links change and once the fonts have loaded, and keeps the links whenever they fit, so they come back as soon as there is room. Before the page's script runs the row clips what it cannot hold, so the page never scrolls sideways. fold={false} keeps the links in the row; fold="links" holds them folded. Markup written by hand sets the fold modifier itself.
The header can have its own room (zone): the medium inset above and below a floating bar and a step in from the sides, a smaller one in a narrow space, and none around a flat bar; past the content width its row stays that wide and centered while the surface runs on. It is off by default, so a page that already leaves room around its header keeps its own. A frosted header has a blur behind it, strongest at the top and gone by its foot, so what scrolls under it is never read sharply there; it shows where the bar has no background of its own, or in its room, and is not drawn when the system asks for forced colors. In the centred look in a narrow space the theme switch steps aside so the brand can sit in the middle; the menu button stays.
The header does not hide while the reader scrolls down. A page that wants it to hide moves the header itself.
Accessibility
What it does for you
- A link's count and dot are part of its name, after a pause: "Issues, 18".
- The bar is a banner landmark; the links are a navigation landmark named "Main" by default and the menu one named "Menu".
- The menu button and each group opener carry their expanded state and control what they open. Escape closes the open menu and returns focus to the menu button, as the app bar's does.
- A group in the wide bar follows the disclosure navigation pattern of the WAI-ARIA Authoring Practices, which suits site navigation better than a menu: ordinary site navigation stays links and lists, not menus. The opener is a button; its children are ordinary links in a group named after it, and stay in the tab order. The down arrow on the opener opens the group on its first link; the arrows, Home and End move between the links; Escape closes and returns focus to the opener; Tab past the last link closes it and moves on.
- The current page carries the current-page marker in both forms, among the top-level links and among a group's children. The wide dropdown draws no mark for it, because its item has no such state.
- Parts hidden by the layout switch or folded away are removed from the tab order.
- In the centred look the brand is still first in reading and Tab order, before the links that are drawn to its left.
What you must do
- Give the links another name when a page has more than one header.
- Give every word it says by itself, such as the menu button's name, in the page's language; each keeps its English unless the page gives its own.
How to test
- With the keyboard only, Tab through the header: the brand comes first, every link, button and group opener shows its focus ring, and nothing hidden takes focus.
- Open a group in the wide bar with Enter or Down Arrow, move with the arrow keys, Home and End, then press Escape: it closes and focus returns to the opener.
- In the narrow form, open the menu with its button and close it with Escape: focus returns to the menu button.
- With a screen reader, the header is found as a banner landmark, its links as a navigation landmark by name, a count is read after the link's name, and the current page is read as current.
- With text at 200% and the page 320 pixels wide, the narrow form shows and every label stays whole.
- In a forced-color mode, the links, the current-page mark and the focus rings are still visible.
Keyboard
| Key | What it does |
|---|---|
| TaborShift+Tab | Moves focus to the next or previous link, button or group opener. Tab past the last link of an open group closes it. |
| Enter | Follows the focused link or presses the focused button. |
| EnterorSpace | On the menu button or a group opener, opens or closes what it controls. |
| Down Arrow | On a group opener, opens the group on its first link. |
| Down ArroworUp Arrow | In an open group, moves between its links. |
| HomeorEnd | In an open group, moves to its first or last link. |
| Escape | Closes the open group or menu and returns focus to its opener. |
Source
The files the header is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-header — Header. Figma "Header" 7392:2169 (Style × Platform × State), built from the app bar's parts.
* The top of a website: the brand, page links in the middle, a call to action and the theme switch at the end.
* In a wide space the bar is three columns, the links centered in it. In a narrow space the links move into a
* menu that a button opens under the bar, and the call to action fills the menu's last row. Which form shows is
* the layout switch. In a wide space too narrow for the links the wrapper folds them away (fold): the menu
* button shows and opens them under the bar, while the call to action stays.
*
* What the header shares with the app bar, which it is built from, is written once in ../bar/bar.css: the bar and
* its surface, the five looks, the bar's own room (zone), the frost behind it, the second row, the row's common
* arrangement and the open menu's movement. This stylesheet keeps what is the header's own: its grid of three
* columns, its links, call to action and menu groups, and the fade between backgrounds. */
/* A page may switch the background while it is on screen (on once content scrolls under the bar):
the surface, its edge and its shadow fade in and out with the state purpose rather than
jumping, under reduced motion too, since nothing moves. The menu and its groups stop growing
under reduced motion (the block at the end). */
.smbk-header {
transition-property: background-color, border-color, box-shadow;
transition-duration: var(--smbk-motion-state-duration);
transition-timing-function: var(--smbk-motion-state-easing);
}
/* Figma draws the header's edge inside it (80 tall in a wide space, 56 in a narrow one), so each
padding here gives the edge's width back; the same in the narrow bar and its menu.
The wide bar as Figma draws it: three columns, the start (the brand) in the first, the links in the
second, the end in the third, the large inline step apart, the row at least a large control tall. The first
and the third share what the links leave equally, so the links stay in the middle of the bar whatever the two
ends hold; where there is too little room, each end keeps what its content needs and the links give up the
exact middle rather than overlap. The row clips what it cannot hold until the page's script has measured it,
so the page never scrolls sideways. */
.smbk-header__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-auto-rows: minmax(var(--smbk-size-control-lg), auto);
gap: var(--smbk-space-inline-lg);
padding: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
/* Each place has its own column, so a place that is gone (the links, folded) leaves the others where they are. */
.smbk-header__start {
grid-area: 1 / 1;
justify-self: start;
}
.smbk-header__nav {
grid-area: 1 / 2;
}
.smbk-header__end {
grid-area: 1 / 3;
}
.smbk-header__brand {
justify-self: start;
}
/* In the narrow form the brand gives way first: in a space too narrow for the
brand, the theme switch and the menu button (the smallest phones), the logo
scales down inside its box rather than pushing the menu button out of the
bar. At every width where they fit, nothing changes. */
@container style(--smbk-layout: narrow) {
.smbk-header__start,
.smbk-header__brand {
flex-shrink: 1;
min-width: 0;
}
}
/* Figma draws the logo small in the narrow bar (AppBarStart Logo small, 24 tall). Only
there may it scale down inside its box (the brand giving way, above): a wide bar keeps the whole logo,
because a logo that may shrink to its box has no width of its own to claim in the bar's first column. */
@container style(--smbk-layout: narrow) {
.smbk-header__logo {
height: var(--smbk-size-icon-lg);
max-width: 100%;
}
}
/* The page links (their row is in bar.css): the large ones the large step apart. */
.smbk-header__links {
margin: 0;
padding: 0;
list-style: none;
}
.smbk-header--size-lg .smbk-header__links {
gap: var(--smbk-space-inline-lg);
}
/* The end: the call to action and the theme switch. */
.smbk-header__end {
justify-content: flex-end;
flex-shrink: 0;
}
/* The open menu, as Figma's open mobile header draws it: one divider under the bar, then the
links and the call to action on one rhythm, each row a medium control tall and the extra-small
stack step apart, the large inset in from the sides and above the menu's foot. A group of further
links opened under a link keeps the same rhythm, its links set further in. */
.smbk-header__menu {
padding: 0 calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
.smbk-header__menu-list {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
margin: 0;
padding: var(--smbk-space-stack-xs) 0 0;
list-style: none;
}
.smbk-header__menu-list > li {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
}
.smbk-header__group {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
margin: 0;
padding: 0;
list-style: none;
}
.smbk-header__group[hidden] {
display: none;
}
/* A group's links read as under the link that opened them: their words start the item's own side
padding further in, while their fill still spans the row. */
.smbk-header__group .smbk-nav-item {
padding-inline-start: calc(var(--smbk-space-inset-xl) + var(--smbk-space-inset-xl));
}
/* The call to action as the menu's last row, only in the narrow form: in a wide bar whose links have folded, it
stays in the bar. */
.smbk-header__menu-cta {
display: none;
flex-direction: column;
padding-top: var(--smbk-space-stack-xs);
}
.smbk-header__menu-cta > * {
width: 100%;
}
/* ---- the looks' rows (their surfaces are in bar.css) ---- */
/* The second row has the bar's padding at its sides and foot. */
.smbk-header__second-row {
padding: 0 calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
/* Floating hug: the three places side by side. */
.smbk-header--look-floating-hug .smbk-header__bar {
grid-template-columns: auto auto auto;
}
/* Split: the row holds the two islands at its two ends, each an island a large control tall inside the bar's
padding. */
.smbk-header--look-split .smbk-header__bar {
display: flex;
justify-content: space-between;
}
.smbk-header--look-split .smbk-header__start,
.smbk-header--look-split .smbk-header__trail {
min-height: calc(var(--smbk-size-control-lg) + var(--smbk-space-inset-xl) + var(--smbk-space-inset-xl));
padding: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
.smbk-header--look-split .smbk-header__second-row {
padding: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
/* Centred: the links at the start, the brand in the middle, the end at the end. */
.smbk-header--look-centred .smbk-header__start {
grid-area: 1 / 2;
justify-self: center;
}
.smbk-header--look-centred .smbk-header__nav {
grid-area: 1 / 1;
justify-self: start;
}
/* ---- fold: in a wide space too narrow for the links, they go and the menu button takes their place, opening
them under the bar; the call to action and the theme switch stay. The wrapper measures and sets it. ---- */
.smbk-header--fold-links .smbk-header__nav {
display: none;
}
/* ---- the two forms (the shared parts are in bar.css): the open menu's foot padding after a fold. ---- */
.smbk-header--fold-links.smbk-header--expanded .smbk-header__menu {
padding-bottom: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
/* The narrow bar as Figma draws it: one row, brand and controls at its two ends; the medium inset above, below
and at the end, the large one at the start. The menu button's own padding
brings its icon level with the logo's inset from the other edge. */
@container style(--smbk-layout: narrow) {
.smbk-header__bar {
display: flex;
justify-content: space-between;
padding: calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
.smbk-header__menu-cta {
display: flex;
}
.smbk-header__second-row {
padding: 0 calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
.smbk-header--expanded .smbk-header__menu {
padding-bottom: calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
/* Split: the islands have the narrow bar's padding. */
.smbk-header--look-split .smbk-header__start,
.smbk-header--look-split .smbk-header__trail,
.smbk-header--look-split .smbk-header__second-row {
min-height: 0;
padding: calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-xl) - var(--smbk-border-width-hairline));
}
/* Centred: the theme switch steps aside so the brand can sit in the middle (bar.css), as Figma draws the centred
phone bar. */
.smbk-header--look-centred .smbk-header__theme {
display: none;
}
}
/* ---- motion: the menu's own is in bar.css. ---- */
/* A group of further links under an item of the open menu grows the same way. */
.smbk-header__group {
interpolate-size: allow-keywords;
overflow: clip;
overflow-clip-margin: calc(var(--smbk-focus-ring-width) + var(--smbk-focus-ring-offset));
transition-property: block-size, display;
transition-duration: var(--smbk-motion-enter-duration);
transition-timing-function: var(--smbk-motion-enter-easing);
transition-behavior: allow-discrete;
}
.smbk-header__group[hidden] {
block-size: 0;
transition-duration: var(--smbk-motion-exit-duration);
transition-timing-function: var(--smbk-motion-exit-easing);
}
@starting-style {
.smbk-header--expanded .smbk-header__menu {
block-size: 0;
padding-bottom: 0;
}
.smbk-header__group:not([hidden]) {
block-size: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.smbk-header__group {
transition: none;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| color.border.rim--smbk-color-border-rim | light: #ffffffe6dark: #ffffff0dchanges with theme | Color | |
| radius.container.sm--smbk-radius-container-sm | 8px | Radius | |
| color.surface.default--smbk-color-surface-default | light: #f3f5f8dark: #181a1cchanges with theme | Color | |
| color.text.default--smbk-color-text-default | light: #232527dark: #e7ebf0changes with theme | Color | |
| elevation.raised--smbk-elevation-raised | light: 0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431adark: 0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026 | Elevation | |
| motion.state.duration--smbk-motion-state-duration | 200ms | Motion | |
| motion.state.easing--smbk-motion-state-easing | cubic-bezier(0.65, 0, 0.35, 1) | Motion | |
| space.inset.md--smbk-space-inset-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| space.inset.2xl--smbk-space-inset-2xl | comfortable: 24pxcompact: 16pxchanges with density | Spacing | |
| space.gutter.xs--smbk-space-gutter-xs | comfortable: 8pxcompact: 4pxchanges with density | Spacing | |
| space.0--smbk-space-0 | 0px | Spacing | |
| size.layout.container.default--smbk-size-layout-container-default | 1360px | Size | |
| space.inset.xl--smbk-space-inset-xl | comfortable: 16pxcompact: 12pxchanges with density | Spacing | |
| blur.4--smbk-blur-4 | 4px | Blur | |
| blur.8--smbk-blur-8 | 8px | Blur | |
| blur.14--smbk-blur-14 | 14px | Blur | |
| color.border.subtle--smbk-color-border-subtle | light: #c4cdd8dark: #2d3237changes with theme | Color | |
| space.stack.sm--smbk-space-stack-sm | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| space.inline.lg--smbk-space-inline-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| space.stack.md--smbk-space-stack-md | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| space.inline.md--smbk-space-inline-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| size.control.md--smbk-size-control-md | comfortable: 40pxcompact: 32pxchanges with density | Size | |
| focus.ring.width--smbk-focus-ring-width | 2px | Focus | |
| color.border.focus--smbk-color-border-focus | light: #cc0d0ddark: #f34336changes with theme | Color | |
| focus.ring.offset--smbk-focus-ring-offset | 2px | Focus | |
| radius.control.xs--smbk-radius-control-xs | 2px | Radius | |
| size.icon.xl--smbk-size-icon-xl | 32px | Size | |
| space.inline.xs--smbk-space-inline-xs | 4px | Spacing | |
| space.inline.sm--smbk-space-inline-sm | comfortable: 6pxcompact: 4pxchanges with density | Spacing | |
| motion.enter.duration--smbk-motion-enter-duration | 320ms | Motion | |
| motion.enter.easing--smbk-motion-enter-easing | cubic-bezier(0.16, 1, 0.3, 1) | Motion | |
| space.inline.2xl--smbk-space-inline-2xl | comfortable: 24pxcompact: 16pxchanges with density | Spacing | |
| motion.exit.duration--smbk-motion-exit-duration | 200ms | Motion | |
| motion.exit.easing--smbk-motion-exit-easing | cubic-bezier(0.7, 0, 0.84, 0) | Motion | |
| size.target.comfortable--smbk-size-target-comfortable | 44px | Size | |
| size.control.lg--smbk-size-control-lg | comfortable: 48pxcompact: 40pxchanges with density | Size | |
| size.icon.lg--smbk-size-icon-lg | 24px | Size | |
| space.stack.xs--smbk-space-stack-xs | 4px | Spacing |
Manifest
{
"name": "header",
"block": "smbk-header",
"summary": "The top of a website: brand, page links, a call to action and the theme switch, in five looks; the links fold into a menu when they do not fit.",
"adapt": "css",
"axes": {
"look": {
"values": [
"floating",
"floating-hug",
"flat",
"split",
"centred"
],
"default": "floating",
"description": "Floating: a raised bar with rounded corners and a hairline edge, the links in the true middle. Floating hug: the same bar only as wide as its content, centered. Flat: a square bar with no edge or shadow, a line along its foot. Split: the brand on an island of its own at the start, the links and the end on one at the end. Centred: the links at the start, the brand in the middle (in a narrow space the theme switch steps aside so the brand can sit in the middle). Figma calls this Style; the app bar has the same looks."
},
"size": {
"values": [
"md",
"lg"
],
"default": "md",
"description": "How large the page links in the wide bar are. md is Figma's header: the middle navigation item, the extra-small step apart. lg is the large item the large step apart, as the header drew them before. The narrow menu keeps its large items either way."
},
"background": {
"values": [
"on",
"off"
],
"default": "on",
"description": "The bar's own surface. Off drops its fill, edge and shadow so it sits on whatever is behind it; the open menu keeps its surface, as Figma draws the open header only with one. Figma: Background (on by default)."
},
"line": {
"values": [
"on",
"off"
],
"default": "on",
"description": "The hairline along the foot of a flat bar. Only the flat look draws it. Figma: Line (on by default)."
},
"fold": {
"values": [
"none",
"links"
],
"default": "none",
"description": "Whether the page links have folded away in a wide space too narrow for them: the menu button then shows and opens them under the bar, while the call to action and the theme switch stay. The wrapper measures the row and sets it; markup written by hand sets it the same way."
}
},
"flags": {
"expanded": {
"description": "The menu is open under the bar: in a narrow space, or in a wide one whose links have folded away."
},
"zone": {
"description": "The bar's own room, as Figma draws it: the medium inset above and below a floating bar and a step in from the sides, and its row held to the content width. Off by default, so a page that already leaves room around its header keeps its own."
},
"frosted": {
"description": "A blur behind the bar, strongest at the top and gone by its foot, so what scrolls under it is never read sharply there. For a bar with its background off, or with its own room. Not drawn when the system asks for forced colors."
}
},
"parts": [
"panel",
"frost",
"bar",
"start",
"brand",
"logo",
"trail",
"nav",
"links",
"end",
"theme",
"menu-button",
"second-row",
"second-row-nav",
"menu",
"menu-list",
"group",
"menu-cta",
"wide-only",
"narrow-only"
],
"figmaNodeId": "7392:2169"
}