GrBottomNav

The active item is declared aria-current="page" and differs by three signs at once: the background, the weight of the label and the colour. Colour alone is not enough — it is invisible to monochrome vision and does not exist for a screen reader (WCAG 1.4.1).

The landmark is always named: without a name the <nav> of the bar is indistinguishable from the main navigation of the page. The default comes from the locale (gr.bottomNav.label), and ariaLabel overrides it.

The component does not use role="tab": bottom navigation switches pages rather than panels inside one screen, and a tablist without a tabpanel is a broken pattern.

The number is drawn decoratively, with a visually hidden label beside it: a bare “12” tells a screen reader nothing. A numeric value is announced through the locale (gr.bottomNav.badge), a string one is read as it is, and badgeLabel overrides both.

<GrBottomNav v-model="section" :as="RouterLink" :items="items" />

The root tag of an item is chosen like this: as (when the item has to) → <a href> → <button>. A link gives the right click, “open in a new tab” and prefetching — everything a button does not have. disabled makes the root a <span>: an unreachable section must not stay in the Tab order.

GrLink is deliberately not imported inside: the dependency would drag its CSS to the consumer for the sake of a single tag.

<GrBottomNav v-model="section" :items="items" hide-above="none" position="static" />

• hideAbove (sm by default, and also md, lg, none) — the breakpoint from which the bar is hidden. none is for a kiosk and for a PWA, where the bottom navigation is permanent;
• position (fixed by default, static) — static takes the bar out of the fixed layer and puts it into the flow as an ordinary block: that way it can be built into the layout.

In fixed mode the layer is --gr-z-bottom-nav (850): the lowest in the scale, so an open dropdown, a tooltip or a modal covers the bar. The details — ../z-index.md.

The bottom padding accounts for env(safe-area-inset-bottom) — on a phone with a gesture bar the labels do not slide under it.

disabled dims the item with the --gr-disabled-fg token rather than with transparency: opacity dilutes text colours that were tuned to AA.

<GrBottomNav v-model="section" :items="items" size="lg" />

<GrConfigProvider size="sm">
…
</GrConfigProvider>

The step pulls three things at once:

What the step does not touch is the size of the item itself: min-width and min-height stay at 44px on every step. A touch target smaller than 44×44 is a failure of WCAG 2.5.5, and “make the bar more compact” is no reason to fall into it. The practical consequence: xs squeezes the bar out of the air around the content, not out of the area the finger aims at.

The value arrives by the shared rule: the local prop → componentDefaults → the global size of the provider → md (see ../sizes.md).

An icon, a label and a counter do not cover everything: in a messenger an avatar stands where the profile icon would be. The item slot hands over the content of the item as a whole:

<GrBottomNav v-model="section" :items="items">
  <template #item="{ item, active, disabled, badgeLabel }">
    <GrAvatar v-if="item.value === 'me'" :size="24" alt="Ann Lee" />
    <span v-else :class="item.icon" class="block h-5 w-5" aria-hidden="true" />
    <span class="truncate leading-none">{{ item.label }}</span>
  </template>
</GrBottomNav>

The slot changes the content, not the behaviour: the choice of tag (button / a / the component from as), aria-current, aria-disabled and the click handling stay with the component. That is why a custom item cannot accidentally stop being navigation.

Taking over the markup, you take over the announcing of the counter too: the visually hidden label is drawn together with the badge. The ready string arrives through the slot (badgeLabel) — it is enough to put it into sr-only, the locale and the item’s badgeLabel are already taken into account.