16-00-navs

Base nav (<ul><li>...</li>...</ul>)

• Active
• Link
• Link
• Disabled

Base nav (<a>...</a>)

Horizontal alignment (Centered with .justify-content-center:)

• Active
• Link
• Link
• Disabled

Horizontal alignment (Right-aligned with .justify-content-end:)

• Active
• Link
• Link
• Disabled

Vertical alignment (flex-sm-column;)

• Active
• Link
• Link
• Disabled

Vertical alignment (flex-sm-column; without <ul>s)

Tabs

• Active
• Link
• Link
• Disabled

Pills

• Active
• Link
• Link
• Disabled

Fill and justify

• Active
• Much longer nav link
• Link
• Disabled

Fill and justify (using a <nav>-based navigation)

Fill and justify (use .nav-justified)

• Active
• Much longer nav link
• Link
• Disabled

Fill and justify (use .nav-justified and a <nav>-based navigation)

Working with flex utilities

Using dropdowns - Tabs with dropdowns

• Active
• Dropdown
  Action Another action Something else here

  Separated link
• Link
• Disabled

Using dropdowns - Pills with dropdowns

• Active
• Dropdown
  Action Another action Something else here

  Separated link
• Link
• Disabled

JavaScript behavior tabs(works with <ul>-based markup)

• Home
• Profile
• Contact

JavaScript behavior tabs(works with <nav>-based markup)

JavaScript behavior horizontal pills(works with <ul>-based markup)

• Home
• Profile
• Contact

JavaScript behavior vertikal pills

Using data attributes

• Home
• Profile
• Messages
• Settings

Fade effect

• Home
• Profile
• Messages
• Settings

Methods - $().tab

• Home
• Profile
• Messages
• Settings

EoF