Nav

Basic

Brand on the left, links on the right. .active bolds the current page. Resize the window to see the burger.

Contrast links

Using .contrast on links for stronger visibility.

Secondary links

Using .secondary on links for lighter styling.

With buttons

Mixing links and buttons in the navigation.

With dropdown

Integrating a <details class="dropdown"> inside the nav.

Vertical (aside)

Stacked navigation inside an <aside>.

Colored navbars

Use .bg-{role} for the background — a gradient is applied and text/links switch to inverse color. Works on <nav> or on a parent <header>.

Full-width colored bar with .bg-primary on the <header> and .container on the <nav>:

Active link

Add .active to bold the current page link.

Sticky top

Add .sticky-top to make the nav stick when scrolling. On a nav, a z-index and box-shadow are added automatically.