Navigation Bar
A sticky 3-column grid for top-level site navigation with start, center, and end slots.
Top-level navigation
Section titled “Top-level navigation”Use the navigation bar for primary site navigation. Place navigation links or a menu action in the start slot, the brand mark in the center slot, and supporting actions such as sign-in or search in the end slot.
The three-column layout keeps the center item optically centered even when the start and end content have different widths.
Sticky and secondary navigation
Section titled “Sticky and secondary navigation”The bar is sticky by default. When a secondary navigation bar should remain visible, set the primary bar’s --navigation-bar-position to static so it scrolls away while the secondary bar stays sticky.
Labels
Section titled “Labels”Use a nav element and give every navigation region a descriptive, unique aria-label, especially when primary and secondary bars appear together.