Skip to main content

Create sidebar items sections using dividers

· One min read
ElChiniNet
ElChiniNet
Developer of Custom Sidebar

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​

custom-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
    ...

Code example result​

Sidebar items sections using dividers

Sidebar items sections using dividers