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>