Section Menu

Clientside Interactivitycore-ui/interactive ↗

Grouped, collapsible navigation: a sticky rail on desktop, a framework drawer (backdrop + click-outside close + focus trap) on mobile (< 900px). Powers the docs + components nav. Active item highlighted; auto-closes on navigation.

Live

Example

interactive.SectionMenu(interactive.SectionMenuConfig{
    AriaLabel:    "Documentation sections",
    TriggerLabel: "Sections",
    Lead:         &interactive.SectionItem{Label: "Overview", Href: "/docs/"},
    Groups: []interactive.SectionGroup{
        {Eyebrow: "01", Label: "Modeling", Items: []interactive.SectionItem{
            {Label: "Entities", Href: "/docs/entities", Active: true},
            {Label: "Filter DSL", Href: "/docs/dsl"},
        }},
        {Eyebrow: "02", Label: "Serving", Collapsed: true, Items: []interactive.SectionItem{
            {Label: "Screens", Href: "/docs/screens"},
        }},
    },
})
// Desktop: sticky rail, all groups expanded. Mobile (< 900px): a
// "Sections" pill opens a focus-trapped slide-in sheet; collapsed groups
// expand on tap; picking a link auto-closes the sheet.