Back

Dock

ℹ️ Production usage

In production wrap the Dock in <div class="fixed bottom-0 inset-x-0 z-40">. Below it is sandboxed inside a preview card.

4 items

5 items with badge

Usage

// In production — fixed to viewport bottom
<div class="fixed bottom-0 inset-x-0 z-40">
    @navigation.Dock(navigation.DockProps{}) {
        @navigation.DockItem(navigation.DockItemProps{
            Label:  "Home",
            Href:   "/",
            Icon:   iconHome(),   // any templ component
            Active: true,
            Badge:  "3",          // optional badge string
        })
        // ... more items
    }
</div>