Sidebar

Navigation

Takes a block

Side navigation. A Sidebar.Item whose to matches the current route is marked .active and aria-current="page".

Sidebar { … }

Example

Sidebar { Sidebar.Header { Text("Console").bold } Sidebar.Item(to: "/", icon: "home") { Text("Overview") } Sidebar.Divider Sidebar.Item(to: "/settings", icon: "settings") { Text("Settings") } }

Renders with the class wf-sidebar, stable across releases, so a stylesheet may target it.

This element takes no props of its own.

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.