Section Menu

Grouped navigation: a sticky rail on desktop whose group headers pin while their links scroll, with an optional filter; on mobile (< 900px) a pill naming the current page opens a bottom sheet (backdrop + drag-down close + focus trap). Powers the docs + components nav.

core-ui/interactive ↗

Live

Example

interactive.SectionMenu(interactive.SectionMenuConfig{
    AriaLabel:    "Documentation sections",
    TriggerLabel: "Sections",
    DrawerName:   "docs-section-menu",
    Filter:       true,
    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"},
        }},
    },
})
// Mount the sheet once: widget.MountBuilder(router, interactive.SectionMenuDrawer(cfg))
// Desktop: sticky rail, every group expanded, each header pinned while
// its links scroll. Mobile (< 900px): a pill at the bottom of the
// viewport names the current page and opens a bottom sheet; collapsed
// groups expand on tap; picking a link closes the sheet.