Navigation

Simple tree-style navigation menu built from a data-source, remembering open items by primary key and supporting dark mode

Live preview

Open in new tab ↗
  • a simple navigation component like Tree
  • easy for customization
  • supports dark mode

Configuration:

  • exec {String} a link to the function
  • pk {String} a primary key (default: id) for remembering last state of tree

Data-source:

[
    {
        id: 1,
        name: 'Text to navigation item',
        title: 'Optional, a title attribute',
        collapsed: true, // only for children, default "false"
        children: [
            // Can contain same structure as the parent
        ]
    }
]

Good to know:

  • only items without children are clickable
  • exec returns an entire object

More UI components

Browse all 348