11 - Navigation

11.1 - Top-nav

Requires javascript

The primary part of the top-nav is global across all products. Some elements require javascript to work properly. See documentation for db.libs.topnav.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
</header>

11.1.1 - Search

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
</header>

11.1.2 - Navigation

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </nav>
  </div>
</header>

11.1.4 - Buttons

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" class="button light small"><span class="icon-Userfemale"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Share"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Settings"></span></a></li>
      </ul>
    </div>
  </div>
</header>

11.1.7 - Navigation small screens

(Only visible on small viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">
      <svg width="30px" height="30px" viewBox="0 0 30 30">
        <rect x="0" y="0" width="30" height="2"/>
        <rect x="0" y="10" width="30" height="2"/>
        <rect x="0" y="10" width="30" height="2"/>
        <rect x="0" y="20" width="30" height="2"/>
      </svg>
    </a>
  </div>
</header>

11.5 - Pagination

<ul class="pagination">
  <li class="arrow unavailable"><a href="" class="icon-Arrow-alt-left"></a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="" class="icon-Arrow-alt-right"></a></li>
</ul>

11.6 - Side nav

<ul class="side-nav">
  <li class="heading">Section</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#" class="active">Link 5</a></li>
</ul>

11.7 - Chapter navigation (Long read article)

Chapter navigation to be used in special articles (long reads). Requires JavaScript to activate drop down on menu for smaller than large size screen, and as it's a sticky menu.

	<header class="chapter-nav">
	    <div class="row">
	        <a href="#" id="toggle-chapter-nav">
	            <button id="show-menu" class="button tiny white"><span class="icon-Hamburger align-left"></span>INNHOLD</button>
	            <button id="close-menu" class="button tiny white hide"><span class="icon-Close align-left"></span>LUKK</button>
	        </a>
	        <nav>
	            <a href="" class="active">Chapter 1</a>
	            <a href="">Chapter 2</a>
	            <a href="">Chapter 3</a>
	            <a href="">Chapter 4</a>
	        </nav>
	        <ul class="button-group">
	          <li><a href="#" class="tiny button twitter icon"><span class="icon-Twitter"></span><em>Twitter</em></a></li>
	          <li><a href="#" class="tiny button facebook icon"><span class="icon-Facebook"></span><em>Facebook</em></a></li>
	          <li><a href="#" class="tiny button google icon"><span class="icon-Google"></span><em>Google+</em></a></li>
	        </ul>
	    </div>
	</header>

11.8 - Tabs

Requires javascript

Tab 1
Tab 2
Tab 3
Tab 4

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>

<ul class="tabs expand-3" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
</ul>