Skip to content

Instantly share code, notes, and snippets.

@tattali

tattali/bootstrap-4-nav-collapse.md

Last active June 13, 2018 10:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tattali/807c91700ba395f35fc8567815ab9c6e to your computer and use it in GitHub Desktop.
Save tattali/807c91700ba395f35fc8567815ab9c6e to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 4 nav collapse
Raw
bootstrap-4-nav-collapse.md

No theme

<ul id="accordionExample">
  <li data-toggle="collapse" data-target="#collapseOne">
    Lvl 1
    <ul id="collapseOne" class="collapse show" data-parent="#accordionExample">
      <li>Lvl 1.1</li>
      <li>Lvl 1.2</li>
    </ul>
  </li>
  <li data-toggle="collapse" data-target="#collapseTwo">
    Lvl 2
    <ul id="collapseTwo" class="collapse" data-parent="#accordionExample">
      <li>Lvl 2.1</li>
      <li>Lvl 2.2</li>
    </ul>
  </li>
</ul>

Dashboard theme example

<ul id="accordionExample" class="nav flex-column">
  <li class="nav-item" data-toggle="collapse" data-target="#collapseOne">
    <a class="nav-link" href="#">
      Lvl 1
    </a>

    <ul id="collapseOne" class="collapse show" data-parent="#accordionExample">
      <li>Lvl 1.1</li>
      <li>Lvl 1.2</li>
    </ul>
  </li>
  <li class="nav-item" data-toggle="collapse" data-target="#collapseTwo">
    <a class="nav-link" href="#">
      Lvl 2
    </a>

    <ul id="collapseTwo" class="collapse" data-parent="#accordionExample">
      <li>Lvl 2.1</li>
      <li>Lvl 2.2</li>
    </ul>
  </li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment