Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/navigation.html

Created March 17, 2020 09:38
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 jensgro/ae424201fe6c22fba80f9a3eefc561f4 to your computer and use it in GitHub Desktop.
Save jensgro/ae424201fe6c22fba80f9a3eefc561f4 to your computer and use it in GitHub Desktop.
Download ZIP
Three possible ways to write classes for a navigation with BEM. There may be more.
Raw
navigation.html
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link" href="#">Link 1</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">Link 2</a>
</li>
</ul>
</nav>
<nav class="main-nav">
<ul class="navlist">
<li class="navlist__item">
<a class="navlist__link" href="#">Link 1</a>
</li>
<li class="navlist__item">
<a class="navlist__link" href="#">Link 2</a>
</li>
</ul>
</nav>
<nav class="navlist-wrapper">
<ul class="navlist">
<li class="navlist__item">
<a class="navlist__link" href="#">Link 1</a>
</li>
<li class="navlist__item">
<a class="navlist__link" href="#">Link 2</a>
</li>
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment