Navbar Component - Goshtoso UI Library for Go

A responsive navigation bar with brand, links, a user-avatar dropdown, a custom right-side slot, and a mobile menu. Built with Alpine.js.

Usage Example

@navbar.Navbar(navbar.Config{
    Brand: brand(),
    Links: []navbar.NavLink{
        {Label: "Products", Href: "#", Active: true},
        {Label: "Pricing", Href: "#"},
        {Label: "Blog", Href: "#"},
    },
})

With User Profile

Pass a User and UserMenu to render an avatar button that opens a dropdown with name, email, and action items.

With User Profile

@navbar.Navbar(navbar.Config{
    Brand: brand(),
    Links: links,
    User:  &navbar.UserProfile{Name: "Alice Brown", Email: "alice.brown@example.com"},
    UserMenu: []navbar.UserMenuItem{
        {Label: "Dashboard", Href: "#"},
        {Label: "Sign Out", Href: "#", Danger: true},
    },
})

With Right Slot

Use Actions with ActionRight to render custom content beside the user avatar.

With Right Slot

@navbar.Navbar(navbar.Config{
    Brand:     brand(),
    Actions: []navbar.ActionItem{{Content: darkModeToggle(), Position: navbar.ActionRight}},
    User:      &navbar.UserProfile{Name: "Alice Brown", Email: "alice.brown@example.com"},
    UserMenu:  menu,
})

Actions, Avatar, and Link Attributes

ActionItem.Position controls whether custom controls render after the brand or before the avatar. NavLink.LinkAttrs and UserMenuItem.LinkAttrs carry analytics, HTMX, or test attributes through to the rendered anchors.

Actions, Avatar, and Link Attributes

@navbar.Navbar(navbar.Config{
    BrandHref: "/docs",
    Brand:     brand(),
    Links: []navbar.NavLink{
        {Label: "Docs", Href: "/docs", Active: true, LinkAttrs: templ.Attributes{"data-track": "nav-docs"}},
        {Label: "API", Href: "/api"},
    },
    Actions: []navbar.ActionItem{
        {Content: environmentBadge(), Position: navbar.ActionLeft},
        {Content: commandButton(), Position: navbar.ActionRight},
    },
    User: &navbar.UserProfile{
        Name:   "Maya Chen",
        Email:  "maya@example.com",
        Avatar: initialsAvatar("MC"),
    },
    UserMenu: []navbar.UserMenuItem{
        {Label: "Profile", Href: "/profile", Icon: userIcon()},
        {Label: "Sign Out", Href: "/logout", Danger: true, LinkAttrs: templ.Attributes{"data-method": "post"}},
    },
})

API Reference

Prop	Type	Default	Description
`Brand`	`templ.Component`	`nil`	Brand/logo content shown at the start of the bar.
`BrandHref`	`string`	`"/"`	Link target for the brand. Empty values fall back to /.
`Links`	`[]NavLink`	`nil`	Primary desktop and mobile nav links.
`NavLink`	`struct`	`-`	Link row: Label, Href, Active, and LinkAttrs. Active adds aria-current="page".
`Actions`	`[]ActionItem`	`nil`	Custom controls rendered after the brand or before the avatar.
`ActionItem.Content`	`templ.Component`	`nil`	Button, badge, theme selector, or other control to render in the navbar.
`ActionItem.Position`	`ActionPosition`	`ActionLeft`	ActionLeft renders after the brand; ActionRight renders before the avatar and inside the mobile menu.
`User`	`*UserProfile`	`nil`	User profile; when present, renders the avatar dropdown trigger.
`UserProfile`	`struct`	`-`	Name and Email render in the dropdown header. Avatar overrides the default user icon.
`UserMenu`	`[]UserMenuItem`	`nil`	Items in the user dropdown and mobile menu.
`UserMenuItem`	`struct`	`-`	Menu row: Label, Href, optional Icon, LinkAttrs, and Danger styling.
`NavAttrs`	`templ.Attributes`	`nil`	Arbitrary attributes on the <nav>.
`NavClass`	`string`	`""`	Extra classes on the nav.

Link Pagination