Navbar

Anatomy

Code

<GdNavbar sticky>
  <template #brand><GdLogo :size="24" wordmark /></template>
  <GdButton variant="ghost" size="sm">Help</GdButton>
  <GdAvatar name="Jordan Teal" />
</GdNavbar>

The bar is the shell

The COMPONENT is the shell. The assembled product header \u2014 brand, section pills, help, the account, and the rules about what collapses where \u2014 is the Navbar block.

The one thing the bar takes back is the nav link: a bare NuxtLink slotted in is styled by the bar itself, so its hit area, its pill and its you-are-here state are one product across the map, Code and the marketing site. Left to each app it would be three near-identical rules drifting apart.

Use the component for the shell and the block for the product header. The component is the bar; the block is everything hung on it.
width="contained" is for marketing, where the bar's edges should line up with the document column. App chrome wants full, the default.
:home="false" when something above already carries the mark. A logo in two places says the brand twice and links home twice.

API

Props

PropTypeDefault

titlestring—

A title in the bar, for an app that has no brand slot to fill.

width"contained" | "full""full"

`contained` holds the contents to the document column so the bar's edges line up with the page beneath it; `full` spans the viewport. Marketing is the case that opts in to `contained`.

stickybooleanfalse

Pins the bar to the top of the scroller.

homestring | false"/"

Where the mark goes. `false` draws no brand at all — for a bar mounted under something that already carries one.

Slots

brand

Replaces the default mark. The docs chassis puts a wordmark and product suffix here.

status

The middle of the bar — a breadcrumb, a saving indicator, section pills.

default

The actions on the right. A bare NuxtLink dropped here is styled by the bar itself, hit area, pill and you-are-here state included.