Bottom navigation

A mobile bottom tab bar.

import { BuiBottomNavigation, BuiBottomNavigationItem } from 'ng-blatui';

<nav buiBottomNavigation>
  <a buiBottomNavItem href="#" label="Home" [active]="true">🏠</a>
  <a buiBottomNavItem href="#" label="Search">🔍</a>
  <a buiBottomNavItem href="#" label="Alerts" [badge]="3">🔔</a>
</nav>

API reference

nav[buiBottomNavigation]

Inputs

Prop	Type	Default	Description
`ariaLabel`	`string`	`'Bottom navigation'`	Accessible label applied to the navigation element.

a[buiBottomNavItem], button[buiBottomNavItem]

Inputs

Prop	Type	Default	Description
`label`	`string`	`''`	Caption shown beneath the projected icon; hidden when empty.
`active`	`boolean`	`false`	Whether this tab is the current page; sets `aria-current="page"`.
`badge`	`string \| number \| boolean \| null`	`null`	Badge content; `true` renders a dot, a string/number renders a count, `null` shows nothing.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.