Navbar

What it is made of

GdNavbar — the shell: geometry, surface, stickiness, three slots
GdLogo in #brand — 24px, wordmark on
The section set in #status — a nav of pills, one carrying aria-current="page"
GdButton variant="ghost" size="sm" — help, in the default slot
GdAvatar — the account, last in the default slot

The block

Wide content scrolls in its own container here. A real product bar handles narrow by hiding items instead — an app decision this demo does not fake.

Code

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

Rules

Draw the active pill as the sunken surface — --gd-surface-sunken, the same recession the segmented control uses.
Mark it aria-current="page" as well. The sunken fill is the sighted half of the same statement.
Give the pill set a nav and a label. It is navigation, and an unlabelled landmark is one a screen-reader user has to open to identify.
Below --gd-bp-medium collapse the side rail INTO this tab set. Never into a hamburger.
Handle a narrow bar by dropping items, not by shrinking them. The theme control is the model: it sheds its text label at 767px and takes the icon square.
Do not restyle the bar itself. Geometry, surface and stickiness belong to GdNavbar; this block is the fill.

Behavior & Anatomy

The active pill is a recession, not a highlight

The active section pill is the sunken surface — the same recession grammar as the segmented control, because it is the same idea: one of a few modes, chosen. A raised or accented pill would say "this is the important one", which is a different claim and one the bar is not making.

Narrow is handled by hiding, not by squeezing

A product navbar at 380px is fighting for room with the brand and the account, so the smallest-value item leaves rather than every item getting smaller. The system's own worked example is GdThemeToggle: below 767px it drops its text label and takes the icon button's square geometry outright — the breakpoint is written into the component so it is one number for every app rather than a number each app picks. Before that rule existed the docs chassis hid its own label at 900px, which is precisely the drift the component was written to end.

Hiding only the caption was not enough on its own: GdButton's label wrapper stayed in the flex row as a zero-width item, still collecting the row's 8px gap on top of a text button's side padding — measured at 47×29 with the glyph 8px left of centre. The collapse therefore reproduces is-icon's geometry, not just its silence.

The docs bar is this block's other face

Menu button (narrow), wordmark, theme control — assembled by the packaged docs chassis rather than hand-built per site. Same shell, different fill, which is the whole argument for the shell being a component and the fill being a block.