# Header 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. Block: `smbk-header`. 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`, `floating-hug`, `flat`, `split`, `centred` | `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. | | `size` | `md`, `lg` | `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. | | `background` | `on`, `off` | `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). | | `line` | `on`, `off` | `on` | The hairline along the foot of a flat bar. Only the flat look draws it. Figma: Line (on by default). | | `fold` | `none`, `links` | `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. | | `expanded` | on / off | off | The menu is open under the bar: in a narrow space, or in a wide one whose links have folded away. | | `zone` | on / 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. | | `frosted` | on / 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. | Parts: `smbk-header__panel`, `smbk-header__frost`, `smbk-header__bar`, `smbk-header__start`, `smbk-header__brand`, `smbk-header__logo`, `smbk-header__trail`, `smbk-header__nav`, `smbk-header__links`, `smbk-header__end`, `smbk-header__theme`, `smbk-header__menu-button`, `smbk-header__second-row`, `smbk-header__second-row-nav`, `smbk-header__menu`, `smbk-header__menu-list`, `smbk-header__group`, `smbk-header__menu-cta`, `smbk-header__wide-only`, `smbk-header__narrow-only` ## Markup ```html

``` ## React ```tsx import { Header } from './design-system/components/header/header.js'; import { Button } from './design-system/components/button/button.js'; import { ThemeSwitch } from './design-system/components/theme-switch/theme-switch.js';

Book a call} themeSwitch={} /> ``` ## Stylesheet ```css /* 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 ```json { "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." } }, "surface": { "default": { "$type": "color", "$value": "{{color.grey.100}}", "$description": "Standard surface: cards, panels, the header." } }, "text": { "default": { "$type": "color", "$value": "{{color.grey.900}}", "$description": "Main text." } } }, "radius": { "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." } } }, "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" } } }, "motion": { "state": { "duration": { "$type": "duration", "$value": "{{duration.200}}" }, "easing": { "$type": "cubicBezier", "$value": "{{easing.cubic-in-out}}" } }, "enter": { "duration": { "$type": "duration", "$value": "{{duration.320}}" }, "easing": { "$type": "cubicBezier", "$value": "{{easing.expo-out}}" } }, "exit": { "duration": { "$type": "duration", "$value": "{{duration.200}}" }, "easing": { "$type": "cubicBezier", "$value": "{{easing.expo-in}}" } } }, "space": { "0": { "$type": "dimension", "$value": "0px", "$description": "Raw space step, 0 px. Only for fixed distances inside a component; spacing that follows density uses space/inset, stack or inline." }, "inset": { "md": { "$type": "dimension", "$value": "{{space.8}}", "$description": "Padding inside a component, medium." }, "2xl": { "$type": "dimension", "$value": "{{space.24}}", "$description": "Padding inside a component, 2× large." }, "xl": { "$type": "dimension", "$value": "{{space.16}}", "$description": "Padding inside a component, extra large." } }, "gutter": { "xs": { "$type": "dimension", "$value": "{{space.8}}", "$description": "A section’s outer side padding on a phone (space/layout/gutter points here). The page itself has no gutter: each section carries its own." } }, "stack": { "sm": { "$type": "dimension", "$value": "{{space.8}}", "$description": "Gap between things stacked one above another, small." }, "md": { "$type": "dimension", "$value": "{{space.12}}", "$description": "Gap between things stacked one above another, medium." }, "xs": { "$type": "dimension", "$value": "{{space.4}}", "$description": "Gap between things stacked one above another, extra small." } }, "inline": { "lg": { "$type": "dimension", "$value": "{{space.12}}", "$description": "Gap between things side by side, large." }, "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." }, "sm": { "$type": "dimension", "$value": "{{space.6}}", "$description": "Gap between things side by side, small." }, "2xl": { "$type": "dimension", "$value": "{{space.24}}", "$description": "Gap between things side by side, 2× large." } } }, "size": { "layout": { "container": { "default": { "$type": "dimension", "$value": "{{size.layout.container.3xl}}", "$description": "The default page container max width: 3xl, 1360 px. Full width (the space available) is the Fill sizing in Figma and size/layout/container/full (100%) in code, which Figma cannot hold as a number." } } }, "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)." }, "lg": { "$type": "dimension", "$value": "{{size.48}}", "$description": "Height of a large control: 48 comfortable, 40 compact. A page may use it for its main call to action; apps use md. 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)." } }, "icon": { "xl": { "$type": "dimension", "$value": "{{size.32}}", "$description": "Icon box, extra large." }, "lg": { "$type": "dimension", "$value": "{{size.24}}", "$description": "Icon box, large." } }, "target": { "comfortable": { "$type": "dimension", "$value": "{{size.44}}", "$description": "Comfortable touch target (44)." } } }, "blur": { "4": { "$type": "dimension", "$value": "4px", "$description": "Raw blur, 4 px." }, "8": { "$type": "dimension", "$value": "8px", "$description": "Raw blur, 8 px." }, "14": { "$type": "dimension", "$value": "14px", "$description": "Raw blur, 14 px." } }, "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." } } } } ``` ## 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. ## 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's `picture`): 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. ## When to use - The top of every page of a website. ## When not to use - An application. Use the [app bar](app-bar.md), which has the same looks. - A page with no navigation. A logo alone is not a header. ## 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 | |---|---| | Tab or Shift + 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. | | Enter or Space | 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 Arrow or Up Arrow | In an open group, moves between its links. | | Home or End | In an open group, moves to its first or last link. | | Escape | Closes the open group or menu and returns focus to its opener. | ## 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.