The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

You can combine other elements such as badges, icon or caret to separate nav items, we provide .nav-prepend and .nav-append for wrapping those elements.

• Link
• Active
• Link
• Disabled
  2

Add nav-{lg|sm} to make navigations are larger or smaller

• Active
• Link
• Link
• Disabled

• Active
• Link
• Link
• Disabled

• Active
• Link
• Link
• Disabled

Add .nav-vertical class to .nav elements for applying vertical appearance, but this feature is not supported for .nav-tabs class.

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.

• Active
• Link
• Link
• Disabled

• Active
• Link
• Link
• Disabled

• Active
• Link
• Link
• Disabled

Force your .nav's contents to extend the full available width. To proportionately fill all available space with your .nav-items, use .nav-fill. For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links.

• Active
• Much longer nav link
• Link
• Disabled

• Active
• Longer link
• Link
• Disabled