Sidebar

Organize navigation into labelled sections. Flat item lists, grouped sections, nested sub-items, collapsible Alpine sections, and an overlay mode with a hamburger trigger.

Usage Example

@sidebar.Sidebar(sidebar.Config{
    LogoText:   "MyApp",
    ShowSearch: true,
    Items: []sidebar.Item{
        {ID: "dashboard", Label: "Dashboard", Href: "#", Icon: dashboardIcon()},
        {ID: "profile", Label: "Profile", Href: "#", Icon: profileIcon(), Active: true},
        {ID: "inbox", Label: "Inbox", Href: "#", Icon: inboxIcon(), Badge: "3"},
    },
})

With Sections

Use Sections (each with a Title and Items) to group links logically.

With Sections

@sidebar.Sidebar(sidebar.Config{
    LogoText: "Docs",
    Sections: []sidebar.Section{
        {Title: "Getting Started", Items: gettingStartedItems},
        {Title: "Components", Items: componentItems},
    },
})

With Sub-Items

An Item can carry nested Items (with their own Badge) for API-reference-style navigation.

With Sub-Items

{ID: "ep-users", Label: "Users", Href: "#", Icon: usersIcon(), Items: []sidebar.Item{
    {ID: "ep-create-user", Label: "Create User", Href: "#", Badge: "POST"},
    {ID: "ep-get-user", Label: "Get User", Href: "#", Badge: "GET"},
}}

Collapsible Sections

Compose collapsible groups with Alpine (x-data + x-collapse) when you need section headers that expand and collapse on click.

Collapsible Sections

<div x-data="{ sections: { general: true, content: false } }">
    <button x-on:click="sections.general = !sections.general">General</button>
    <div x-show="sections.general" x-collapse> ...items... </div>
</div>

Overlay Sidebar

Render the sidebar in an off-canvas panel with a backdrop and a hamburger trigger.

Overlay Sidebar

@sidebar.Overlay(sidebar.OverlayConfig{
    ID:                     "docs-nav",
    TriggerLabel:           "Open sidebar",
    PanelPositionClass:     "fixed top-16 bottom-0 left-0",
    BackdropPositionClass:  "fixed top-16 bottom-0 inset-x-0",
    Sidebar: sidebar.Config{
        LogoText:   "Docs",
        ShowSearch: true,
        Items:      navItems,
    },
})

API Reference

Prop	Type	Default	Description
`Items`	`[]Item`	`nil`	Flat item list. Item: ID, Label, Href, Icon, Active, Disabled, Badge, nested Items.
`Sections`	`[]Section`	`nil`	Grouped sections, each with a Title and Items (use instead of, or with, Items).
`SectionsTitle`	`string`	`""`	Optional heading above the sections.
`Logo`	`templ.Component`	`nil`	Custom logo content (overrides LogoText).
`LogoText`	`string`	`""`	Text logo shown at the top.
`LogoHref`	`string`	`""`	Link target for the logo.
`ShowSearch`	`bool`	`false`	Render a search input below the logo.
`SearchPlaceholder`	`string`	`""`	Placeholder for the search input.
`SearchSlot`	`templ.Component`	`nil`	Custom search-area content.
`FooterSlot`	`templ.Component`	`nil`	Content pinned to the bottom of the sidebar.
`RootClass`	`string`	`""`	Extra classes on the nav.
`OverlayConfig.Sidebar`	`Config`	`Config{}`	Sidebar configuration rendered inside the off-canvas panel.
`OverlayConfig.ID`	`string`	`""`	Panel id prefix and Alpine state source.
`OverlayConfig.Trigger`	`templ.Component`	`nil`	Custom trigger contents.
`OverlayConfig.TriggerLabel`	`string`	`"Open sidebar"`	Accessible trigger label.
`OverlayConfig.RootClass`	`string`	`""`	Extra classes on the overlay root.
`OverlayConfig.TriggerClass`	`string`	`""`	Extra classes on the trigger button.
`OverlayConfig.BackdropPositionClass`	`string`	`"fixed inset-0"`	Backdrop positioning classes.
`OverlayConfig.BackdropClass`	`string`	`""`	Extra classes on the backdrop.
`OverlayConfig.PanelPositionClass`	`string`	`"fixed inset-y-0 left-0"`	Panel positioning classes.
`OverlayConfig.PanelWidthClass`	`string`	`"w-72"`	Panel width classes.
`OverlayConfig.PanelClass`	`string`	`""`	Extra classes on the panel wrapper.

Pagination Tabs