If you want to create a simple horizontal menu, add the .n class to a element, followed by .n-item for each and add the .n-link class to their links:
Example Link Link Link Disabled Try it Yourself » Aligned NAdd the .justify-content-center class to center the n, and the .justify-content-end class to right-align the n.
Example Try it Yourself » Vertical NAdd the .flex-column class to create a vertical n:
Example Try it Yourself » TabsTurn the n menu into nigation tabs with the .n-tabs class. Add the .active class to the active/current link. If you want the tabs to be togglable, see the last example on this page.
Example Active Link Link Disabled Try it Yourself » PillsTurn the n menu into nigation pills with the .n-pills class. If you want the pills to be togglable, see the last example on this page.
Example Active Link Link Disabled Try it Yourself » Justified Tabs/pillsJustify the tabs/pills with the .n-justified class (equal width):
Active Link Link Disabled Active Link Link Disabled Example .... Try it Yourself » Pills with Dropdown Active Dropdown Link 1 Link 2 Link 3 Link Disabled Example Active Dropdown Link 1 Link 2 Link 3 Link Disabled Try it Yourself » Tabs with Dropdown Active Dropdown Link 1 Link 2 Link 3 Link Disabled Example Active Dropdown Link 1 Link 2 Link 3 Link Disabled Try it Yourself » Toggleable / Dynamic Tabs Home Menu 1 Menu 2 HOMELorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Menu 1Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Menu 2Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a element with class .tab-content.
If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:
Example Home Menu 1 Menu 2... ... ...
Try it Yourself » Toggleable / Dynamic Pills Home Menu 1 Menu 2 HOMELorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Menu 1Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Menu 2Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
The same code applies to pills; only change the data-toggle attribute to data-toggle="pill":
Example Home Menu 1 Menu 2... ... ...
Try it Yourself » Complete Bootstrap 4 N ReferenceFor a complete reference of all tab options, methods and events, go to our Bootstrap 4 JS Tab Reference.
❮ Previous Next ❯ ★ +1 Sign in to track progress