# Bottom Nav

Source: https://lumeo.nativ.sh/components/bottom-nav

# Bottom Nav

Mobile-first bottom tab bar with icons, labels, badges, safe-area padding, and an optional floating action button. Pair with Sidebar for responsive app layouts.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<BottomNav />

## When to Use

-   Mobile or touch-first apps that need 3–5 top-level destinations always reachable
-   As the small-screen half of a responsive pair: `Sidebar` on desktop, `BottomNav` on mobile
-   Thumb-zone primary actions (center FAB for "Create", "Compose", "Scan")

Not for: deep navigation hierarchies, admin panels, or more than ~5 items. Use [Sidebar](components/sidebar), [Tabs](components/tabs), or [Navigation Menu](components/navigation-menu) for those.

Preview Code

Basic

App content area

[Home](#home) [Search](#search) [Inbox](#inbox) [Profile](#profile)

Preview Code

With Badges

Unread indicators

[Home](#home) [3Chat](#chat) [12Inbox](#inbox) [Profile](#profile)

Preview Code

With Center FAB

Primary action in the thumb zone

[Home](#home) [Search](#search) [Inbox](#inbox) [Profile](#profile)

Preview Code

Animated Transitions

Click a tab — active highlight glides in.

Home Search Inbox Profile

Preview Code

Variant — interactive

Pick a value to see it applied live. **Default** anchors full-width to the bottom; **Pill** floats as a centered rounded bar.

DefaultPill

App content area

[Home](#home) [Search](#search) [Inbox](#inbox) [Profile](#profile)

Preview Code

Floating Pill

Elevated centered pill variant

[Home](#home) [Search](#search) [Inbox](#inbox) [Profile](#profile)

## Responsive: Sidebar ↔ BottomNav

The standard mobile pattern: show the full `<Sidebar>` on `md` and up, and a 4-item `<BottomNav>` below it. Pick the 4 most-used items — do not mirror the full sidebar tree; bury the rest behind a "More" item or a Sheet.

<!-- MainLayout.razor --> <div class="min-h-screen flex"> <!-- Sidebar: visible on md and up --> <SidebarProvider Class="hidden md:flex"> <SidebarComponent> <SidebarHeader>Acme Inc</SidebarHeader> <SidebarContent> <SidebarMenu> <SidebarMenuItem> <SidebarMenuButton Href="/" IsActive="@true"> <IconContent><Icon Name="House" Size="Lumeo.Size.Sm" /></IconContent> <LabelContent>Home</LabelContent> </SidebarMenuButton> </SidebarMenuItem> <!-- …full sidebar tree… --> </SidebarMenu> </SidebarContent> </SidebarComponent> </SidebarProvider> <!-- Main content: reserve space at the bottom on mobile --> <main class="flex-1 pb-16 md:pb-0"> @Body </main> </div> <!-- BottomNav: visible below md. Pick the 4 most-used items only. --> <BottomNav Class="md:hidden"> <BottomNavItem Href="/" Label="Home"> <IconContent><Icon Name="House" Size="Lumeo.Size.Sm" /></IconContent> </BottomNavItem> <BottomNavItem Href="/search" Label="Search"> <IconContent><Icon Name="Search" Size="Lumeo.Size.Sm" /></IconContent> </BottomNavItem> <BottomNavItem Href="/inbox" Label="Inbox"> <IconContent><Icon Name="Inbox" Size="Lumeo.Size.Sm" /></IconContent> <Badge>3</Badge> </BottomNavItem> <BottomNavItem Href="/profile" Label="Profile"> <IconContent><Icon Name="User" Size="Lumeo.Size.Sm" /></IconContent> </BottomNavItem> </BottomNav>

Two simple rules: the Sidebar is `hidden md:flex`, the BottomNav is `md:hidden`. Add `pb-16 md:pb-0` to your scroll container so content isn't hidden behind the fixed bar on mobile.

## API Reference

### BottomNav

Prop

Type

Default

Description

ChildContent

RenderFragment?

—

The `<BottomNavItem>` entries and optional `<BottomNavFab>`.

Variant

BottomNavVariant

Default

`Default` solid bar with top border, or `Pill` floating centered pill.

Fixed

bool

true

Pins to the viewport bottom via `position: fixed`. Set `false` to render inline (e.g. inside a demo frame).

AriaLabel

string

"Bottom navigation"

Accessible label for the `<nav>` landmark.

Class

string?

—

Extra Tailwind classes on the root `<nav>`.

AnimatedIndicator

bool

false

When true, each item gets smooth background-color and color transitions on role changes, and the active pill transitions its transform with a spring easing.

### BottomNavItem

Prop

Type

Default

Description

Href

string?

—

Destination URL. When set, renders as `<a>`; otherwise `<button>`.

Label

string?

—

Text shown under the icon and used as `aria-label`.

IconContent

RenderFragment?

—

Icon slot. Use `<Icon Name="..." />` or any Blazicon.

Badge

RenderFragment?

—

Optional badge rendered on the icon — pass a count, dot, or arbitrary markup.

IsActive

bool?

null

Manual override. When `null`, active state is inferred from the current URL matching `Href`.

OnClick

EventCallback

—

Fires for both link and button renderings. Navigation still proceeds for `Href`.

PressEffect

Button.ButtonPressEffect

None

Press feedback animation. Values: None, Scale, Brightness, Ripple.

### BottomNavFab

Prop

Type

Default

Description

AriaLabel

string

"Primary action"

Required accessible name — FABs are usually icon-only.

Href

string?

—

Optional link destination; otherwise renders as `<button>`.

OnClick

EventCallback

—

Click handler.

ChildContent

RenderFragment?

—

Button content — usually an `<Icon>`.

## Related Components

-   [Sidebar](components/sidebar) — Use on desktop in the responsive pair
-   [Tabs](components/tabs) — For switching views within a page (not top-level nav)
-   [Speed Dial](components/speed-dial) — Alternative quick-action surface
-   [Sheet](components/sheet) — Bottom sheet for "More" destinations that don't fit in 4 tabs