• Active
• Link
• Link
• Disabled

Roll your own navigation style by extending the base .nav component. All Bootstrap’s nav components are built on top of this by specifying additional styles.

• Active
• Link
• Link
• Disabled

To wrap with border, use .wrap-border class.

• Active
• Link
• Link
• Disabled

To wrap with square border, use .square-border class with .wrap-border class.

• Active
• Link
• Link
• Disabled

To add divider, use .dropdown-divider class to <li>

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

To add header to nav, use .nav-header class.

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

You can also add icon to the text in header section.

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

You can add icon to right side of the text by using .float-right class.

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

You can also add icon to both sides of the text in header section.

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

Use icon name class to set icons.

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

To set icons to right use .float-right class.

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

• Heading Option 1
• Active
• Link
• Link
• Heading Option 2
• Link

• New Heading Option 1
• Active
• Link
• Link
• Heading Option 2 beware
• Link

To add label to nav, use .badge.badge-COLOR classes.

• 5 Heading Option 1
• Active
• Link
• Link
• Heading Option 2 1
• Link

To add label pill to nav, use .badge.badge-pill.badge-COLOR classes.

• New Heading Option 1
• Active 2
• Link 1
• Link 3
• Heading Option 2 Info
• Link 4
• Link 2

• Notifications Heading Option 1
• Active 2
• Link 4
• Link 1
• Heading Option 2 Available
• Link Offline
• Link Online