Huesos
Style
Guide

Repositoire

GitHub

Preview

Toc

A toc or table of contents is a special kind of vertical menu based off a <nav> item.

It usually differs from a normal menu in some or all of this aspects:

  • It holds several nested menus.
  • These nested menus are visible by default (no “accordions” or open/close triggers).
  • They’re dense and informative (as opposite to small, site-wide navigation menus).

Our TOC is a very opinionated component because exposing all the configuration would be overkill. It won’t let bold weight to pass below the first depth level, it will apply a progressive reduction of font-size.

You can still use $toc-font-weight, $toc-uppercase and $toc-font-size to determine the first-level font-size, the first-level font-weight and the uppercase status.

$toc-kill-links is set to $nav-kill-links (true by default) and it will kill the link decoration, but not the color. If you need to totally disable the links, you can use kill-link.

Example

<section>
    <nav class="toc">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Section</a></li>
            <li>
                <a href="#">Works</a>
                <ul>
                    <li>
                        <a href="#">Home</a></li>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Section</a></li>
                    </ul>
            </li>
            <li><a href="#">Section</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">About us</a></li>
            <li><span>Contact</span></li>
            <li><span class="disabled">Exit</span></li>
        </ul>
        </li>
        <li><a href="#">About us</a></li>
        <li><span>Contact</span></li>
        <li><span class="disabled">Exit</span></li>
        </ul>
    </nav>
</section>

Assets

  • Filesystem Path: src/components/navigation/toc/_toc.scss
  • Size: 727 Bytes 
  • .toc {

  @if $toc-kill-links {
    a {
      @include kill-link-decoration();
    }
  }

  ul,
  ol {
		li {
      margin: 0;
      font-weight: $toc-font-weight;
      letter-spacing: initial;
      @if $toc-uppercase {
        text-transform: uppercase;
      } @else {
        text-transform: initial;
      }
      @include ritmo-font-size($toc-font-size);
      ul,
      ol {
        margin: 0 0 $gutter / 2 $gutter / 2;
        li{
          // Don't let "bold" pass through here
          font-weight: normal;
          @include ritmo-font-size(0.95 * $toc-font-size);
        }
        ul,
        ol {
          li {
            @include ritmo-font-size(0.7 * $toc-font-size);
          }
        }
      }
		}
  }
}