Mushilu-San UI Mobile navigation
A fixed bottom bar of three to five destinations, with badges for new items.
Selector: mui-mobile-nav
import { MobileNav, MobileNavItem } from '@mushilu-san/ui/mobile';Loading example…
Overview
nav landmark with mui-mobile-nav-item links. activeItem is a two-way model holding the value of the current item, which gets aria-current="page".
badge shows a count on an item.
Guidelines
Do
Pair every icon with a short text label. Show a badge only for items that need attention.
Don't
Do not hide the bar when the user scrolls down.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | navigation | |
item | link | aria-current="page" on the active item. Badge counts are part of the name. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace |
Each item needs a visible label. Icons alone are not enough.
API
MobileNav
| Name | Type | Default | Description |
|---|---|---|---|
activeItem | string | '' | Two-way binding for the currently active item value. |
CSS parts
::part(bar)::part(root)
MobileNavItem
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique value identifying this destination. |
label | string | — | Visible label text shown beneath the icon. |
badge | number | 0 | Optional badge count. A value > 0 shows a numeric badge; -1 shows a dot badge. |
CSS parts
::part(badge)::part(button)::part(icon)::part(item)::part(label)
Tokens
--mui-color-surface-raised--mui-color-border--mui-color-primary--mui-color-danger--mui-touch-target