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

News Team

Ron Burgundy

Veronica Corningstone

News Team

Ron Burgundy

Veronica Corningstone

To make a dropup menu Wrap it in a div class="dropup"

News Team Ron Burgundy ...

TABS

Tabbed Browsing - Content

KQHS Channel 9

Wes Mantooth

Baxter's Bites

San Diego News

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

KQHS Channel 9

Wes Mantooth

Baxter's Bites

San Diego News

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 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 s 2. Enclose those in a bigger 3. Enclose them and your tabs in an even bigger KQHS Channel 9 Wes Mantooth Baxter's Bites San Diego News Stuff about KQHS here Stuff about Wes here Stuff about Baxter Stuff about News here

12

Tabbed Sections In Same Document - Styling

KQHS Channel 9 Wes Mantooth Baxter's Bites San Diego News Stuff about KQHS here Stuff about Wes here Stuff about Baxter Stuff about News here

PILLS

Pills are an attractive navigation option

(The glyphs are optional)

Pills are made exactly like tabs

KQHS Channel 9 Mantooth Baxter's Bites San Diego News

NAVIGATION BARS

The Goal

We want to create something like this:

18

Remember, start with the content

KVWN Channel 4

Schedule

News Team

San Diego Sites

Search

Then add classes so it will behave

KVWN Channel 4

Schedule

News Team

San Diego Sites

Search

To create submenus add a nested ...

KVWN Channel 4

Schedule News Team Ron Burgundy Veronica Corningstone

Brick Tamland Champ Kind Brian Fantana San Diego Sites

...

... and assign it certain classes KVWN Channel 4

Schedule News Team Ron Burgundy Veronica Corningstone

Brick Tamland Champ Kind Brian Fantana San Diego Sites

...

tl;dr Bootstrap allows you to easily create navigation

affordances like: Tabs Pills Dropdown menus Responsive navbars