Navbar — Ogonëk M3 Docs

Navigation Bars are Rail's mobile counterpart — a fixed bottom bar for 3–5 primary destinations below the md breakpoint. In this library, most apps don't mount it directly: Rail's withNavbar prop renders it automatically.

M3 Spec

open_in_new

Overview

The Navbar component implements the Material Design 3 Navigation Bar pattern: a fixed horizontal bar of NavbarItems, each showing an icon and label with an active-state indicator.

Rail renders a Navbar internally when withNavbar is set, using its own RailItem list — you rarely compose Navbar by hand unless you need a standalone mobile-only nav bar with no rail at all.

Import

import { Navbar, NavbarItem } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Open the Navbar story — previewed at a mobile viewport, matching its md:hidden behaviour.

Basic Usage

Prefer Rail's withNavbar prop for the common case. Mount Navbar directly only for a standalone bottom bar:

<script lang="ts">
  import { Navbar, NavbarItem } from '@noxlovette/material';
</script>

<Navbar ghost>
  <NavbarItem label="Home"     href="/"        iconProps={{ name: 'house' }} />
  <NavbarItem label="Messages" href="/messages" iconProps={{ name: 'mail' }} badge={5} />
  <NavbarItem label="Settings" href="/settings" iconProps={{ name: 'settings' }} />
</Navbar>

Navbar Props

Prop	Type	Default	Description
`children` required	`Snippet`	`—`	NavbarItem elements to render inside the bar.
`fab`	`Snippet`	`—`	Optional Floating Action Button rendered above the bar, offset to avoid overlapping items.
`trailing`	`Snippet`	`—`	Optional content rendered after the nav items, e.g. a settings shortcut.
`ghost`	`boolean`	`false`	Renders an invisible same-height spacer after the fixed bar so page content below it is not obscured.

NavbarItem Props

Prop	Type	Default	Description
`href` required	`string`	`—`	The destination URL. Active state is derived by comparing href to the current page URL.
`label` required	`string`	`—`	The text label shown below the icon.
`iconProps` required	`IconProps`	`—`	Passed directly to the Icon component.
`badge`	`number`	`0`	Numeric badge overlaid on the icon. Pass -1 for a dot indicator.
`selected`	`boolean`	`false`	Manually force the active/selected visual state.

Accessibility

visibility

Active state

Active items receive aria-current="page" from the underlying NavigationMenu.Link (Bits UI).

smartphone

Landmark

Rendered inside a NavigationMenu.List, announced by assistive tech as a navigation landmark.