Accordion Sidebar Navigation

Nested accordions form a collapsible nav tree. heading-level="none" leaves the outline to the list structure, marker="start" reads as a tree toggle, and the parts strip the boxed look.

Code

The following example assumes that you have imported the component and set up the theme.

<nav class="sidebar-nav" aria-label="Documentation">
31 collapsed lines
  <ul>
    <li><a href="#">Introduction</a></li>
    <li>
      <sv-accordion heading-level="none" marker="start" opened>
        <span slot="summary">Components</span>
        <ul>
          <li><a aria-current="page" href="#">Accordion</a></li>
          <li><a href="#">Dialog</a></li>
          <li>
            <sv-accordion heading-level="none" marker="start">
              <span slot="summary">Form controls</span>
              <ul>
                <li><a href="#">Select</a></li>
                <li><a href="#">Slider</a></li>
                <li><a href="#">Toggle</a></li>
              </ul>
            </sv-accordion>
          </li>
        </ul>
      </sv-accordion>
    </li>
    <li>
      <sv-accordion heading-level="none" marker="start">
        <span slot="summary">Guides</span>
        <ul>
          <li><a href="#">Theming</a></li>
          <li><a href="#">Accessibility</a></li>
        </ul>
      </sv-accordion>
    </li>
  </ul>
</nav>

<style>
74 collapsed lines
  .sidebar-nav {
    max-inline-size: 17rem;
    padding: 1em 0.75em;
    margin-inline: auto;
    font-size: 0.9em;
    background-color: var(--sv-gray-7);
    border: 1px solid var(--sv-gray-5);
    border-radius: var(--sv-bdr-rad-lg);

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    > ul {
      display: grid;
      gap: 1em;
    }

    a {
      display: block;
      padding: 0.3em 1.4em;
      color: var(--sv-gray-3);
      text-decoration: none;
      border-inline-start: 1px solid transparent;
      border-start-end-radius: 5px;
      border-end-end-radius: 5px;

      &:hover {
        color: var(--sv-accent);
        background-color: var(--sv-gray-6);
      }

      &[aria-current="page"] {
        color: var(--sv-accent);
        background-color: var(--sv-gray-6);
        border-inline-start-color: var(--sv-accent);
      }
    }

    > ul > li > a {
      padding-inline-start: 2em;
      font-weight: 600;
      color: var(--sv-gray-2);
    }

    [slot="summary"] {
      display: flex;
      gap: 0.5em;
      align-items: center;
      font-weight: 600;
    }

    sv-accordion::part(container) {
      background-color: transparent;
      border: none;
    }

    sv-accordion::part(trigger) {
      padding-block: 0.35em;
      background-color: transparent;
    }

    sv-accordion::part(trigger):hover {
      color: var(--sv-accent);
    }

    sv-accordion::part(content) {
      padding-inline: 0;
      margin-inline-start: calc(1lh - 10px);
      border-inline-start: 1px solid var(--sv-gray-5);
    }
  }
</style>