Bus UI Shells

SidebarNav renders the left-rail choices.

Use SidebarNav when a sidebar needs safe links, callback-backed controls, active state, collapse metadata, and deterministic item ids.

Public API

Function	`ui.SidebarNav`
Props	`ui.SidebarNavProps`
Item props	`ui.SidebarNavItemProps`
Use for	Reusable navigation rails with link and typed control targets.

Example

Loading SidebarNav demo...

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node, err := ui.SidebarNav(ui.SidebarNavProps{
  AppLabel:  "Accounting",
  MountPath: "/accounting/",
  Items: []ui.SidebarNavItemProps{
    {ID: "overview", Label: "Overview", Href: "index.html", Active: true},
    {ID: "files", Label: "Files", Href: "files/index.html"},
  },
})

html, err := gx.RenderHTML(node)

In .gx source, put the navigation item list in a wrapper and pass the visible app label through markup.

In .gx source, the sidebar navigation stays as semantic links with the active item in markup.

.gx source

package shellui

import gx "github.com/busdk/bus-gx/pkg/gx"

type SectionNavProps struct {
  Current string
}

func SectionNav(props SectionNavProps) gx.Node {
  return <nav class="sidebar-nav" aria-label="Accounting">
  <a aria-current="page" href="/accounting/imports.html"><Text value={props.Current}></Text></a>
  <a href="/accounting/reports.html"><Text value={"Reports"}></Text></a>
</nav>
}

var nav = <SectionNav current={"Imports"}></SectionNav>