BottomNav
BottomNav
Mobile bottom navigation bar for primary app navigation. Place 2–5 BottomNavItem children inside — each shows an icon, optional label, and optional notification badge.
Basic
BottomNav with Fixed=false scoped to a container. In a real app use the default Fixed=true to pin to the viewport bottom.
Active: home
With Notification Badges
BadgeCount on a BottomNavItem shows a count chip. MaxBadgeCount defaults to 99 — anything above shows 99+.
Active: home
Custom Icon Content
Use the IconContent fragment for custom SVG, avatar images, or any markup instead of a Lucide icon name.
Active: home
API Reference
BottomNav and BottomNavItem parameters.
BottomNav
| Prop | Type | Default | Description |
|---|---|---|---|
| ActiveTab | string? | — | Value of the currently active tab. |
| ActiveTabChanged | EventCallback<string?> | — | Fires when the active tab changes. Use @bind-ActiveTab for two-way binding. |
| ChildContent | RenderFragment? | — | BottomNavItem children. |
| Fixed | bool | true | Pins the nav to the viewport bottom. Set false when scoped inside a container. |
| AriaLabel | string | "Main navigation" | Accessible label for the nav landmark. |
| Class | string? | — | Additional CSS classes. |
BottomNavItem
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | string | (required) | Unique identifier matched against BottomNav.ActiveTab. |
| Icon | string? | — | Lucide icon name (e.g. "house"). Ignored when IconContent is provided. |
| IconContent | RenderFragment? | — | Custom icon fragment — use for SVG, avatars, or styled icons. |
| Label | string? | — | Text label displayed below the icon. |
| BadgeCount | int | 0 | Notification badge count. Hidden when zero unless ShowZeroBadge is true. |
| MaxBadgeCount | int | 99 | Counts above this show as "99+". |
| ShowZeroBadge | bool | false | Show badge even when BadgeCount is zero. |
| OnClick | EventCallback | — | Additional click handler invoked alongside the tab switch. |
| Class | string? | — | Additional CSS classes on the button element. |