Bus UI Navigation Components

Move between module views without moving policy into the view.

Navigation helpers now export through pkg/ui. Use them when a module needs tabs, menus, or a generic navigation rail, and keep route and target policy in the owning module.

Public APIs

Component	Use it for	Public API	Current path
Menu	Immediate command menus with a trigger and bounded choices.	`Menu` / `MenuProps`	`pkg/ui`
Tabs	Sibling views that swap by stable active tab id.	`Tabs` / `TabsProps`	`pkg/ui`
Navigation	Generic navigation rails and section lists.	`Navigation` / `NavigationProps`	`pkg/ui`

Example

Tabs are the simplest fit when the screen stays in one module and only the visible section changes.

Go API

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

node, err := ui.Tabs(ui.TabsProps{
  Label:  "Accounting navigation",
  Active: "files",
  Items: []ui.TabItem{
    {ID: "overview", Label: "Overview", Href: "/modules/accounting/index.html"},
    {ID: "files", Label: "Files", Href: "/modules/accounting/files/index.html"},
  },
})

html, err := gx.RenderHTML(node)

In .gx source, package the tab list in a wrapper and use the wrapper as an uppercase component tag.

In .gx source, navigation examples are authored as semantic links with the active label supplied by props.

.gx source

package navigationui

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

type NavigationFrameProps struct {
  Current string
}

func NavigationFrame(props NavigationFrameProps) gx.Node {
  return <nav class="navigation-frame" aria-label="Product">
  <a href="/dashboard/index.html"><Text value={"Dashboard"}></Text></a>
  <a aria-current="page" href="/imports/index.html"><Text value={props.Current}></Text></a>
</nav>
}

var navigation = <NavigationFrame current={"Imports"}></NavigationFrame>