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

Tactile Press Effect

Tap a tab — it scales for a tactile feel.

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.

Bottom Nav

Installation

Usage

When to Use

Responsive: Sidebar ↔ BottomNav

API Reference

BottomNav

BottomNavItem

BottomNavFab

Bottom Nav

Installation

Usage

When to Use

Responsive: Sidebar ↔ BottomNav

API Reference

BottomNav

BottomNavItem

BottomNavFab

Related Components

Cookies & consent