HierarchyMenu

Hierarchy is hard to write.

Example

Props

🕹️ standard props
options
Option[]
Array of selectable options
[]
selected
string
Currently selected option
undefined
expanded
string[]
Array of expanded option names
[]
iconsOnly
boolean
Display only icons instead of labels
false
🎨 style props
--hierarchy-menu-gap
size
Gap between elements
4px
--hierarchy-menu-width
size
Width of the menu
100%
--hierarchy-menu-element-border-radius
size
Border radius of menu elements
8px
--hierarchy-menu-element-background-color
color
Background color of menu elements
transparent
--hierarchy-menu-element-color
color
Text color of menu elements
inherit
--hierarchy-menu-element-hover-background-color
color
Background color when hovering
rgb(var(--global-color-background-300), .5)
--hierarchy-menu-element-hover-color
color
Text color when hovering
inherit
--hierarchy-menu-element-active-background-color
color
Background color when active
rgb(var(--global-color-background-300), .5)
--hierarchy-menu-element-active-color
color
Text color when active
inherit
--hierarchy-menu-element-selected-background-color
color
Background color of selected element
rgb(var(--global-color-primary-500), .6)
--hierarchy-menu-element-selected-color
color
Text color of selected element
rgb(var(--global-color-grey-50))
--hierarchy-menu-element-selected-font-weight
font-weight
Font weight of selected element
700
--hierarchy-menu-element-padding
size
Padding of menu elements
8px
--hierarchy-menu-element-cursor
cursor
Cursor style for menu elements
pointer
--hierarchy-menu-icon-button-padding
size
Padding for icon buttons
0px 12px 0px 2px
--hierarchy-menu-sub-options-padding
size
Padding for sub-options
8px 0px 8px 40px

Slots

prependSnippet

Renders content before the option label

Default content:

{#if !!option.options}
  <button
    class="style-less-button icon-button"
    class:no-transform={iconsOnly}
    onclick={(e) => {
      e.stopPropagation()
      if(!iconsOnly) {
        handleExpandOptionClick(option)
      } else {
        handleOptionClick(option)
      }
    }}
  >
    {#if !!option.icon}
      <Icon name={option.icon} />
    {:else if isExpanded}
      <Icon name="mdi-chevron-down" />
    {:else}
      <Icon name="mdi-chevron-right" />
    {/if}
  </button>

  {#if !iconsOnly}
    <button
      class="style-less-button expand-button"
      onclick={(e) => {
        e.stopPropagation()
        handleExpandOptionClick(option)}
      }
    >
      {#if isExpanded}
        <Icon name="mdi-chevron-down" />
      {:else}
        <Icon name="mdi-chevron-right" />
      {/if}
    </button>
  {/if}
{:else if !!option.icon}
  <div class="icon-only">
    <Icon name={option.icon} />
  </div>
{/if}
            

Available variables:

Name	Type	Description
option	Option	The current option

optionSnippet

Renders custom content for an option

Default content:

<div class="label">
  {option.label}
</div>
      

Available variables:

Name	Type	Description
option	Option	The current option

appendSnippet

Renders content after the option label

Available variables:

Name	Type	Description
option	Option	The current option

Events

onoptionClick

Triggered when an option is clicked

Attribute	Type	Description
option	Option	The clicked option