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

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

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, Tabs, or Navigation Menu for those.

Basic

App content area

With Badges

Unread indicators

With Center FAB

Primary action in the thumb zone

Animated Transitions

Click a tab — active highlight glides in.

Variant — interactive

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

App content area

Floating Pill

Elevated centered pill variant

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>`.

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