Collapsible List Web Component

Example

Item 1 Item 2 Subitem 2.1 Subitem 2.2 Item 3 Subitem 3.1 Subitem 3.2 Subitem 3.2.1 Subitem 3.2.2

Usage

<collapsible-list aria-label="Main navigation">
  <collapsible-item>
    <span slot="header">Getting Started</span>
  </collapsible-item>
  
  <collapsible-item>
    <span slot="header">Components</span>
    <collapsible-list aria-label="Components">
      <collapsible-item>
        <span slot="header">Button</span>
      </collapsible-item>
      
      <collapsible-item expanded>
        <div slot="header">
          <strong>Input</strong> <span class="badge">New</span>
        </div>
        <collapsible-list aria-label="Input variants">
          <collapsible-item>
            <span slot="header">Text</span>
          </collapsible-item>
          <collapsible-item>
            <span slot="header">Password</span>
          </collapsible-item>
          <collapsible-item>
            <span slot="header">Email</span>
          </collapsible-item>
        </collapsible-list>
      </collapsible-item>
      
      <collapsible-item>
        <span slot="header">Card</span>
      </collapsible-item>
    </collapsible-list>
  </collapsible-item>
  
  <collapsible-item>
    <span slot="header">Documentation</span>
  </collapsible-item>
  
  <collapsible-item reverse-heading>
    <span slot="header">About (Right-aligned toggle)</span>
  </collapsible-item>
</collapsible-list>

<style>
.badge {
  background: #4a6cf7;
  color: white;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}
</style>