Bootstrap 4 tutorial

Components (9): Navs

Navs

Base nav

`ul`-based nav

Structure

ul.nav
- Item li.nav-item
  - Link a.nav-link Attributes
    - Attribute href="..."
    - Add .active for an active item
    - Add .disabled for disabled items

Example (added border to indicate boundary)

`nav`-based nav (can be built with one level fewer hierarchy)

Structure

nav.nav
- Item+Link a.nav-link Attributes
  - Attribute href="..."
  - Add .active for an active item
  - Add .disabled for disabled items

Available styles

Use Flex utilities

Horizontal alignment

Use .justify-content-(start|center|end)

.justify-content-start (default)

.justify-content-center

.justify-content-end

Vertical

Add .flex-column

Used in ul ⇒ ul.nav.flex-column

Used in nav ⇒ nav.nav.flex-column

Tabs

Add .nav-tabs to ul-based navs.

Example: ul.nav.nav-tabs

Also available for nav-based nav. But nav.nav.nav-tabs draws a false line under an active item (see below).

To fix the problem, add .nav-item to link items ⇒ a.nav-item.nav-link(.active)?

Pills

Set .nav-pills

Used in ul ⇒ ul.nav.nav-pills

Used in nav.nav ⇒ nav.nav.nav-pills

Fill and justify

Default pills (for comparison): added borders to show element boundaries

Auto-width fill: Add .nav-fill to ul ⇒ ul.nav.nav-pills.nav-fill

For nav.nav.nav-pills.nav-fill , add .nav-item to link items ⇒ a.nav-item.nav-link

Equal-width fill: .nav-justified ⇒ ul.nav.nav-pills.nav-justified

For nav.nav.nav-pills.nav-fill , use a.nav-item.nav-link

Same way as tabs: default (for comparison)

Auto-width fill for ul ⇒ ul.nav.nav-tabs.nav-fill

Auto-width fill for nav ⇒ nav.nav.nav-tabs.nav-fill

Eual-width fill for ul ⇒ ul.nav.nav-tabs.nav-justified

Eual-width fill for nav ⇒ nav.nav.nav-tabs.nav-justified

Working with flex utilities

Responsive example using Flex utilities

Structure

nav.nav.nav-pills Attributes
- Vertical (stacked) as default .flex-column
- Horizontal (inline) on md (width≥768px) .flex-md-row
- Items a.nav-link Attributes
  - Fills horizontally to the parent on md (width≥768px) .flex-md-fill
  - Aligns center on md (width≥768px) .text-md-center

Regarding accessibility

Navigations ought to have a role navigation. However it cannot be set to ul elements (see W3C - the ul element : navigation is not allowed to be a role value of ul).

You can use parent wrapper elements for ul-based navigations. For this purpose, nav (see W3C - the nav element) is a proper element.

Parent wrapper nav (or div, etc.) + Role attribute role="navigation"

Navigation ul.nav

For the nav-based nav, you can set the roll directly.

Navigation nav.nav +Role attribute role="navigation"

Caution: The role always must be navigation. Even with .nav-tabs, it must not be tab, tablist, or tabpanel.

It is also recommended to use span.sr-only (⇒ Screenreaders) with text e.g. (current) within an active element for screen reader users. See the actual example in Navbar.

Using dropdowns

Dropdowns can be used as navigation items.

Structure

Dropdown item li.nav-item.dropdown
- Link with dropdown a.nav-link.dropdown-toggle Attributes
  - Attribute href="..."
  - Attribute data-toggle="dropdown"
  - Accessibility attribute role="button"
  - Accessibility attribute aria-haspopup="true"
  - Accessibility attribute aria-expanded="false"
  - Text (e.g.) Dropdown
- Item list div.dropdown-menu
  - Items ⇒ see Dropdowns - Examples

Example used in ul.nav.nav-tabs

Example used in ul.nav.nav-pills

Example used in nav.nav.nav-tabs

Example used in nav.nav.nav-pills

JavaScript behavior (tabbable panes)

You can build tabbable panes with a list group (using bootstrap.js) by setting as follows.

For ul-based nav

Structure

Tablist ul.nav.nav-(tabs|pills) Attribute
- Accessibility attribute role="tablist" (Caution: not "navigation" )
- Tab item li.nav-item
  - Link a.nav-link Attributes
    - Add .active to an initlly-visible item
    - Attribute id="{tab-id}"
    - Attribute data-toggle="tab" or "pill" (no difference)
    - Attribute href="#{content-id}"
    - Accessibility attribute role="tab"
    - Accessibility attribute aria-controls="{content-id}"
    - Accessibility attribute aria-selected="true" (on active) or "false"
    - Text (e.g.) Home
Tab content div.tabcontent
- Content item div.tab-pane Attributes
  - Add .fade for fade in/out animation effect
  - Add .show.active to an initially-visible item
  - Attribute id="{content-id}"
  - Accessibility attribute role="tabpanel"
  - Accessibility attribute aria-labelledby="{tab-id}"

ul.nav.nav-tabs

Home-ul-tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Profile-ul-tabs

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Contact-ul-tabs

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

ul.nav.nav-pills

Home-ul-pills

Profile-ul-pills

Contact-ul-pills

For nav-based nav (see the top-level structure difference below)

Structure

Parent wrapper (for accessibility) nav
- Actual nav root div.nav.nav-(tabs|pills) Attribute
  - Accessibility attribute role="tablist"
  - Tab item/link a.nav-item.nav-link(.active)?
    - Attributes and text (same as ul-based)
Tab content div.tabcontent (same as ul-based)

nav > div.nav.nav-tabs

Home-nav-tabs

Profile-nav-tabs

Contact-nav-tabs

nav > div.nav.nav-pills

Home-nav-pills

Profile-nav-pills

Contact-nav-pills

The last example below is a layout variation with Flexbox (vertical pills on left, content on right, see source for details).

Home Profile Messages Settings

Home

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Profile

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Messages

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Settings

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

Bootstrap 4 tutorial

ul-based nav

nav-based nav (can be built with one level fewer hierarchy)

Home-ul-tabs

Profile-ul-tabs

Contact-ul-tabs

Home-ul-pills

Profile-ul-pills

Contact-ul-pills

Home-nav-tabs

Profile-nav-tabs

Contact-nav-tabs

Home-nav-pills

Profile-nav-pills

Contact-nav-pills

Home

Profile

Messages

Settings

`ul`-based nav

`nav`-based nav (can be built with one level fewer hierarchy)