Bootstrap Navigation Easy and good-looking navigation tabs and bars

Let's talk about ...

� Dropdown and dropup menus � Tabs � Pills � Navbars

Remember, thinking in Bootstrap means content first, styling second

�  For all of these components, you should start with the structure and the content

� Then you'll apply classes

3

DROPDOWN MENUS

<button>

News Team

</button>

<ul>

<li><a href="Anchor">Ron Burgundy</a></li>

<li><a href="coAnchor">Veronica Corningstone</a</li>

<li><a href="Weather">Brick Tamland</a></li>

<li><a href="Sports">Champ Kind</a></li>

<li><a href="Features">Brian Fantana</a></li>

</ul>

A dropdown requires ... ... something to

click ... ... and some things

to show/hide.

<button class="btn btn-default" data-toggle="dropdown">

News Team <span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="Anchor">Ron Burgundy</a></li>

<li><a href="coAnchor">Veronica Corningstone</a</li>

<li><a href="Weather">Brick Tamland</a></li>

<li><a href="Sports">Champ Kind</a></li>

<li><a href="Features">Brian Fantana</a></li>

</ul>

After adding attributes ...

To make a dropup menu � Wrap it in a div class="dropup"<div class="dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> News Team <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="Anchor">Ron Burgundy</a> </li> ... </ul></div>

TABS

Tabbed Browsing - Content <ul>

<li><a href="home">KQHS Channel 9</a></li>

<li><a href="mantooth">Wes Mantooth</a></li>

<li><a href="baxter">Baxter's Bites</a></li>

<li><a href="news">San Diego News</a></li>

</ul>

� This will allow the user to click on a tab and visit that page

� But they don't look like tabs yet

9

Tabbed Browsing - Styling

<ul class="nav nav-tabs">

<li><a href="home">KQHS Channel 9</a></li>

<li><a href="mantooth">Wes Mantooth</a></li>

<li class="active">

<a href="baxter">Baxter's Bites</a></li>

<li><a href="news">San Diego News</a></li>

</ul>

10

That's great for multiple pages, but what about SPAs? �  For a single page application (SPA), change the

links to internal anchors and put the target content in <div>s

� Then we let Bootstap hide and show the divs as needed

� Like so ...

11

Tabbed Sections In The Same Document 1.  Put your "pages" (aka "panes") in <div>s 2.  Enclose those in a bigger <div> 3.  Enclose them and your tabs in an even bigger <div> <div> <!– The enclosing div --> <ul class="nav nav-tabs"> <li><a href="#home">KQHS Channel 9</a></li> <li><a href="#wes">Wes Mantooth</a></li> <li><a href="#baxter">Baxter's Bites</a></li> <li><a href="#news">San Diego News</a></li> </ul> <div> <!– All the panes --> <div id="home"><p>Stuff about KQHS here</p></div> <div id="wes"><p>Stuff about Wes here</p></div> <div id="baxter"><p>Stuff about Baxter</p></div> <div id="news"><p>Stuff about News here</p></div> </div> </div>

12

Tabbed Sections In Same Document - Styling <div class="tabbable"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">KQHS Channel 9</a></li> <li><a href="#wes" data-toggle="tab">Wes Mantooth</a></li> <li><a href="#baxter" data-toggle="tab">Baxter's Bites</a></li> <li><a href="#news" data-toggle="tab">San Diego News</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane"><p>Stuff about KQHS here</p></div> <div id="wes" class="tab-pane"><p>Stuff about Wes here</p></div> <div id="baxter" class="tab-pane"><p>Stuff about Baxter</p></div> <div id="news" class="tab-pane"><p>Stuff about News here</p></div> </div></div>

PILLS

Pills are an attractive navigation option

(The glyphs are optional)

Pills are made exactly like tabs <ul class="nav nav-pills"> <li><a href="home">KQHS Channel 9</a></li> <li><a href="mantooth">Mantooth</a></li> <li class="active"> <a href="baxter">Baxter's Bites</a></li> <li><a href="news">San Diego News</a></li></ul>

NAVIGATION BARS

The Goal

� We want to create something like this:

18

Remember, start with the content <div>

<ul>

<li><a href="Home">KVWN Channel 4</a></li>

<li><a href="Schedule">Schedule</a></li>

<li><a href="#">News Team</a></li>

<li><a href="Visit">San Diego Sites</a></li>

</ul>

<form>

<input type="text" placeholder="Search">

<button type="submit">Search</button>

</form>

</div>

Then add classes so it will behave <div>

<ul class="nav navbar-nav">

<li><a href="Home">KVWN Channel 4</a></li>

<li><a href="Schedule">Schedule</a></li>

<li><a href="#">News Team</a></li>

<li><a href="Visit">San Diego Sites</a></li>

</ul>

<form class="navbar-form navbar-right">

<input type="text" placeholder="Search">

<button type="submit">Search</button>

</form>

</div>

To create submenus add a nested <ul> ...

<div> <ul class="nav navbar-nav"> <li><a href="Home">KVWN Channel 4</a></li>

<li><a href="Schedule">Schedule</a></li> <li> <a href="#">News Team</a> <ul> <li><a href="Anchor">Ron Burgundy</a></li> <li><a href="coAnchor">Veronica Corningstone</a></li>

<li><a href="Weather">Brick Tamland</a></li> <li><a href="Sports">Champ Kind</a></li> <li><a href="Features">Brian Fantana</a></li> </ul> </li> <li><a href="Visit">San Diego Sites</a></li>

</ul> ... </div>

... and assign it certain classes <div> <ul class="nav navbar-nav"> <li><a href="Home">KVWN Channel 4</a></li>

<li><a href="Schedule">Schedule</a></li> <li> <a href="#" data-toggle="dropdown">News Team</a> <ul class="dropdown-menu"> <li><a href="Anchor">Ron Burgundy</a></li> <li><a href="coAnchor">Veronica Corningstone</a></li>

<li><a href="Weather">Brick Tamland</a></li> <li><a href="Sports">Champ Kind</a></li> <li><a href="Features">Brian Fantana</a></li> </ul> </li> <li><a href="Visit">San Diego Sites</a></li>

</ul> ... </div>

tl;dr Bootstrap allows you to easily create navigation

affordances like: � Tabs � Pills � Dropdown menus � Responsive navbars