Skip to content

Sidebar

oldmangan edited this page Oct 6, 2026 · 2 revisions

A collapsible navigation rail: icons, badges, nested groups, section headings, separators, and a spacer for items pinned to the bottom. Groups, headings, separators and the spacer were added in #40.

from wapyt import SidebarConfig, SidebarHeading, SidebarItem, SidebarSeparator, SidebarSpacer

nav = self.add_sidebar("nav", SidebarConfig(
    title="Monguana",
    active="overview",
    items=[
        SidebarHeading("Workspace"),
        SidebarItem("overview", "Overview", "mdi-view-dashboard"),
        SidebarItem("dbs", "Databases", "mdi-database-outline", items=[
            SidebarItem("prod", "prod", "mdi-database", badge=3),
            SidebarItem("archive", "Archive", "mdi-archive", items=[
                SidebarItem("y2019", "2019"),
            ]),
        ]),
        SidebarSeparator(),
        SidebarSpacer(),                                  # pushes Settings to the bottom
        SidebarItem("settings", "Settings", "mdi-cog"),
    ],
))
nav.on_select(lambda p: show_page(p["id"]))

Entries

Entry
SidebarItem(id, label, icon, badge, data, disabled, tooltip) A clickable item. icon is an MDI class; badge a string or number (0 shows); tooltip defaults to the label
SidebarItem(..., items=[...], expanded=False) A group: clicking it opens or closes its children instead of selecting it. Groups nest
SidebarHeading(label) A small section title
SidebarSeparator() A divider line
SidebarSpacer() Takes the free space, so what follows sits at the bottom

SidebarConfig(title, collapse_button=True, collapsed=False, items, active, expanded=None): expanded lists the group ids to open at mount, overriding each group's own expanded.

Groups

  • The active item's groups open by themselves and are marked, so a closed group shows that it holds the active item.
  • Collapsed to icons, a group opens its children in a flyout beside the rail (a Popup); picking one selects it and closes the flyout, and Escape returns focus to the group. Items without an icon show the first letter of their label on the rail, and every icon has a tooltip with its label. Headings hide on the rail.
  • Keyboard: Up / Down / Home / End move through the visible, enabled items; Right opens a group and then steps into it; Left closes it, or goes from a child back to its group.
  • Keep the open groups across sessions: save expanded_ids from on_toggle (or get_expanded()), and pass them back as SidebarConfig(expanded=...) or to set_expanded.

Events and methods

Event Payload
on_select {id, data} when an item (not a group) is clicked
on_toggle {id, expanded, expanded_ids} when the person opens or closes a group
on_collapse, on_expand The rail collapsed or expanded

Methods: collapse, expand, toggle, set_active, get_active, expand_group, collapse_group, get_expanded, set_expanded, set_badge(id, badge) (None clears it), set_items(items) (keeps open groups and the active item), destroy.

Labels, headings and badges are set as text. An icon starting with < is inserted as markup (for an app's own inline SVG); never pass data there.

Clone this wiki locally