Navbar | Brio

Examples

Basic usage

<header class="navbar">
            <div class="cluster is-between">
                <a href="#" class="nav-link is-brand"><strong>Acme</strong></a>
                <nav class="cluster" aria-label="Primary">
                    <a href="#" class="nav-link" aria-current="page">Docs</a>
                    <a href="#" class="nav-link">Components</a>
                    <a href="#" class="nav-link">Blog</a>
                </nav>
                <div class="cluster">
                    <button class="button is-ghost" type="button">Sign in</button>
                    <button class="button" type="button">Sign up</button>
                </div>
            </div>
        </header>

With a subnavbar

<header class="navbar">
            <div class="cluster is-between">
                <a href="#" class="nav-link is-brand"><strong>Acme</strong></a>
                <nav class="cluster" aria-label="Primary">
                    <a href="#" class="nav-link" aria-current="page">Docs</a>
                    <a href="#" class="nav-link">Components</a>
                </nav>
            </div>
        </header>
        <nav class="subnavbar" aria-label="Section">
            <div class="breadcrumb">
                <ol>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><span aria-current="page">Widget</span></li>
                </ol>
            </div>
        </nav>

Token overrides

The bar's whole look is four tokens: background, border color, border width, and padding. Restate them per project -- or per page -- and the component follows; no variant classes needed.

<header class="navbar" style="--navbar-bg: var(--color-fill); --navbar-border-width: 0">
            <div class="cluster is-between">
                <a href="#" class="nav-link is-brand"><strong>Acme</strong></a>
                <div class="cluster">
                    <button class="button is-ghost is-sm" type="button">Help</button>
                    <button class="button is-sm" type="button">Account</button>
                </div>
            </div>
        </header>

Without the bottom border

<header class="navbar no-border">
            <div class="cluster is-between">
                <a href="#" class="nav-link is-brand"><strong>Acme</strong></a>
                <div class="cluster">
                    <button class="button is-ghost" type="button">Help</button>
                    <button class="button" type="button">Account</button>
                </div>
            </div>
        </header>

Source comments

Navbar -- sticky top bar.

Layout INSIDE the navbar is the consumer's concern -- compose with
the primitives brio already ships. Typical shape:

  <header class="navbar">
    <nav class="center cluster is-between">
      <a href="/">Logo</a>
      <div class="cluster">
        <a class="nav-link" aria-current="page">Home</a>
        <a class="nav-link">Products</a>
      </div>
      <div class="cluster is-end">
        <button class="button">Sign in</button>
      </div>
    </nav>
  </header>

The navbar layout (first & last children expand equally, middle items
cluster in the center) is a composition-primitive concern -- see
.cluster.is-between in composition.css.

Reference

Source: src/css/navbar.css

.navbar

Class	Kind	Description
`.no-border`	opt-out	Removes the bottom border

Token	Default	Description
`--navbar-bg`	`var(--color-surface)`	Background color for the navbar
`--navbar-border-color`	`var(--color-border-subtle)`	Border color for the navbar's bottom edge
`--navbar-border-width`	`var(--border-width-default)`	Border width for the navbar's bottom edge
`--navbar-padding-block`	`var(--ui-pad-block-relaxed)`	Block-axis inner padding for the navbar
`--navbar-padding-inline`	`var(--ui-pad-inline-relaxed)`	Inline-axis inner padding for the navbar
`--navbar-position`	`sticky`	Positioning for the navbar

Related: Subnavbar

Sticky secondary bar below the navbar

Source: src/css/navbar.css

Applies to

.subnavbar

Classes

Class	Kind	Description
`.no-border`	opt-out	Removes the bottom border

Tokens

Token	Default	Description
`--subnavbar-bg`	`var(--color-surface)`	Background color for the subnavbar
`--subnavbar-border-color`	`var(--color-border-subtle)`	Border color for the subnavbar's bottom edge
`--subnavbar-border-width`	`var(--border-width-default)`	Border width for the subnavbar's bottom edge
`--subnavbar-padding-block`	`var(--ui-pad-block-snug)`	Block-axis inner padding for the subnavbar
`--subnavbar-padding-inline`	`var(--ui-pad-inline-snug)`	Inline-axis inner padding for the subnavbar
`--subnavbar-position`	`sticky`	Positioning for the subnavbar
`--navbar-height`	`4rem`	Sticky offset from the top, this is meant to be set on navbar or :root