Create sidebar items sections using dividers

Sometimes, if we end with a sidebar with a large amount of items, it would be useful to visually separate them in groups taking into account their context. In this situation, the divider order-item property becomes a handy feature.

divider

Setting this property in true will add a divider below the sidebar item. It will not add a new DOM element, but a pseudo element that will visually act as a divider with the items placed after it.

Code example

YAML

<config directory>/www/sidebar-config.yaml

order:
  - item: 'overview'
    order: 1
  - new_item: true
    item: 'Lights'
    icon: 'mdi:lightbulb-group'
    href: 'lights/woonkamer'
    order: 2
  - item: 'energy'
    order: 3
    divider: true
  - item: 'developer'
    order: 4
  - item: 'settings'
    order: 5
    divider: true
    ...

JSON

<config directory>/www/sidebar-config.json

{
  "order": [
    {
      "item": "overview",
      "order": 1
    },
    {
      "new_item": true,
      "item": "Lights",
      "icon": "mdi:lightbulb-group",
      "href": "lights/woonkamer",
      "order": 2
    },
    {
      "item": "energy",
      "order": 3,
      "divider": true
    },
    {
      "item": "developer",
      "order": 4
    },
    {
      "item": "settings",
      "order": 5,
      "divider": true
    },
    ...
  ]
}

Code example result

Sidebar items sections using dividers