BlazorUI Demo

Bottom navigation

A mobile-first fixed destination bar with route-aware selection.

Primary mobile destinations

This preview is constrained; in an application the component fixes itself to the viewport bottom.

View code 
<div class="relative min-h-32 overflow-hidden rounded-[var(--bui-radius-surface)] border border-[var(--bui-border)]">
    <BuiBottomNavigation AriaLabel="Demo destinations" Style="position:absolute">
        <BuiBottomNavigationItem Href="/" Icon="LucideIcons.House">Home</BuiBottomNavigationItem>
        <BuiBottomNavigationItem Href="/data-grid" Icon="LucideIcons.Table">Data</BuiBottomNavigationItem>
        <BuiBottomNavigationItem Href="/components/forms/text-field" Icon="LucideIcons.User">Profile</BuiBottomNavigationItem>
    </BuiBottomNavigation>
</div>