Skip to content

Navigation

BottomNav

Material 3 navigation bar: a pill grows behind the active icon and the glyph lifts.

BottomNav
import { BottomNav } from '@anomalia/ui';

Notes

  • Items with href render as links, so the browser keeps handling navigation and history.
  • labelsOnlyWhenActive is the compact M3 bar for narrow screens.

Examples

Basics

Material 3's active indicator: a pill scales in behind the icon and the glyph lifts a pixel. Items with `href` render as real links.

API

PropTypeDefaultDescription
valuestringBindable active value.
itemsNavItem[]`{ value, label, href?, badge? }`.
iconSnippet<[string]>Icon for a given item value.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.