extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/docs/components/navs-tabs/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Navs & Tabs'
],
)
block view
+docs-components('https://coreui.io/docs/components/navs-tabs/')
.row
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Base nav
.card-body
p.text-body-secondary.small
| Navigation available in Bootstrap share general markup and styles, from the base
code .nav
| class to the active and disabled states. Swap modifier classes to switch between each style.
p.text-body-secondary.small
| The base
code .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.
+example('https://coreui.io/docs/components/navs-tabs/#base-nav')
ul.nav
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
p.text-body-secondary.small
| Classes are used throughout, so your markup can be super flexible. Use
code
= '<ul>'
| s like above,
code
= '<ol>'
| if the order of your items is important, or roll your own with a
code
= '<nav>'
| element. Because the
code .nav
| uses
code display: flex
| , the nav links behave the same as nav items would, but without the extra markup.
+example('https://coreui.io/docs/components/navs-tabs/#base-nav')
nav.nav
a.nav-link.active(aria-current='page' href='#') Active
a.nav-link(href='#') Link
a.nav-link(href='#') Link
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Horizontal alignment
.card-body
p.text-body-secondary.small
| Change the horizontal alignment of your nav with
a(href='https://coreui.io/docs/layout/grid/#horizontal-alignment') flexbox utilities
| . By default, navs are left-aligned, but you can easily change them to center or right aligned.
p.text-body-secondary.small
| Centered with
code .justify-content-center
| :
+example('https://coreui.io/docs/components/navs-tabs/#horizontal-alignment')
ul.nav.justify-content-center
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
p.text-body-secondary.small
| Right-aligned with
code .justify-content-end
| :
+example('https://coreui.io/docs/components/navs-tabs/#horizontal-alignment')
ul.nav.justify-content-end
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Vertical
.card-body
p.text-body-secondary.small
| Stack your navigation by changing the flex item direction with the
code .flex-column
| utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g.,
code .flex-sm-column
| ).
+example('https://coreui.io/docs/components/navs-tabs/#vertical')
ul.nav.flex-column
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
p.text-body-secondary.small
| As always, vertical navigation is possible without
code
= '<ul>'
| s, too.
+example('https://coreui.io/docs/components/navs-tabs/#vertical')
nav.nav.flex-column
a.nav-link.active(aria-current='page' href='#') Active
a.nav-link(href='#') Link
a.nav-link(href='#') Link
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Tabs
.card-body
p.text-body-secondary.small
| Takes the basic nav from above and adds the
code .nav-tabs
| class to generate a tabbed interface. Use them to create tabbable regions with our
a(href='#javascript-behavior') tab JavaScript plugin
| .
+example('https://coreui.io/docs/components/navs-tabs/#tabs')
ul.nav.nav-tabs
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Pills
.card-body
p.text-body-secondary.small
| Take that same HTML, but use
code .nav-pills
| instead:
+example('https://coreui.io/docs/components/navs-tabs/#pills')
ul.nav.nav-pills
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Fill and justify
.card-body
p.text-body-secondary.small
| Force your
code .nav
| ’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your
code .nav-item
| s, use
code .nav-fill
| . Notice that all horizontal space is occupied, but not every nav item has the same width.
+example('https://coreui.io/docs/components/navs-tabs/#fill-and-justify')
ul.nav.nav-pills.nav-fill
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Much longer nav link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
p.text-body-secondary.small
| When using a
code
= '<nav>'
| -based navigation, you can safely omit
code .nav-item
| as only
code .nav-link
| is required for styling
code
= '<a>'
| elements.
+example('https://coreui.io/docs/components/navs-tabs/#fill-and-justify')
nav.nav.nav-pills.nav-fill
a.nav-link.active(aria-current='page' href='#') Active
a.nav-link(href='#') Much longer nav link
a.nav-link(href='#') Link
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
p.text-body-secondary.small
| For equal-width elements, use
code .nav-justified
| . All horizontal space will be occupied by nav links, but unlike the
code .nav-fill
| above, every nav item will be the same width.
+example('https://coreui.io/docs/components/navs-tabs/#fill-and-justify')
ul.nav.nav-pills.nav-justified
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item
a.nav-link(href='#') Much longer nav link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
p.text-body-secondary.small
| Similar to the
code .nav-fill
| example using a
code
= '<nav>'
| -based navigation.
+example('https://coreui.io/docs/components/navs-tabs/#fill-and-justify')
nav.nav.nav-pills.nav-justified
a.nav-link.active(aria-current='page' href='#') Active
a.nav-link(href='#') Much longer nav link
a.nav-link(href='#') Link
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Working with flex utilities
.card-body
p.text-body-secondary.small
| If you need responsive nav variations, consider using a series of
a(href='https://coreui.io/docs/utilities/flex/') flexbox utilities
| . While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+example('https://coreui.io/docs/components/navs-tabs/#working-with-flex-utilities')
nav.nav.nav-pills.flex-column.flex-sm-row
a.flex-sm-fill.text-sm-center.nav-link.active(aria-current='page' href='#') Active
a.flex-sm-fill.text-sm-center.nav-link(href='#') Longer nav link
a.flex-sm-fill.text-sm-center.nav-link(href='#') Link
a.flex-sm-fill.text-sm-center.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Tabs with dropdowns
.card-body
+example('https://coreui.io/docs/components/navs-tabs/#tabs-with-dropdowns')
ul.nav.nav-tabs
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item.dropdown
a.nav-link.dropdown-toggle(data-coreui-toggle='dropdown' href='#' role='button' aria-expanded='false') Dropdown
ul.dropdown-menu
li
a.dropdown-item(href='#') Action
li
a.dropdown-item(href='#') Another action
li
a.dropdown-item(href='#') Something else here
li
hr.dropdown-divider
li
a.dropdown-item(href='#') Separated link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 Pills with dropdowns
.card-body
+example('https://coreui.io/docs/components/navs-tabs/#pills-with-dropdowns')
ul.nav.nav-pills
li.nav-item
a.nav-link.active(aria-current='page' href='#') Active
li.nav-item.dropdown
a.nav-link.dropdown-toggle(data-coreui-toggle='dropdown' href='#' role='button' aria-expanded='false') Dropdown
ul.dropdown-menu(style='')
li
a.dropdown-item(href='#') Action
li
a.dropdown-item(href='#') Another action
li
a.dropdown-item(href='#') Something else here
li
hr.dropdown-divider
li
a.dropdown-item(href='#') Separated link
li.nav-item
a.nav-link(href='#') Link
li.nav-item
a.nav-link.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled
.col-12
.card.mb-4
.card-header
strong Navs
span.small.ms-1 JavaScript behavior
.card-body
p.text-body-secondary.small
| Use the tab JavaScript plugin—include it individually or through the compiled
code coreui.js
| file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
p.text-body-secondary.small
| Dynamic tabbed interfaces, as described in the
a(href='https://www.w3.org/TR/wai-aria-practices/#tabpanel')
abbr(title='Web Accessibility Initiative') WAI
abbr(title='Accessible Rich Internet Applications') ARIA
| Authoring Practices
| , require
code role="tablist"
| ,
code role="tab"
| ,
code role="tabpanel"
| , and additional
code aria-
| attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using
code
= '<button>'
| elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
p.text-body-secondary.small
| Note that dynamic tabbed interfaces should
em not
| contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
+example('https://coreui.io/docs/components/navs-tabs/#javascript-behavior')
ul#myTab.nav.nav-tabs.mb-3(role='tablist')
li.nav-item(role='presentation')
button#home-tab.nav-link.active(data-coreui-toggle='tab' data-coreui-target='#home' type='button' role='tab' aria-controls='home' aria-selected='true') Home
li.nav-item(role='presentation')
button#profile-tab.nav-link(data-coreui-toggle='tab' data-coreui-target='#profile' type='button' role='tab' aria-controls='profile' aria-selected='false') Profile
li.nav-item(role='presentation')
button#contact-tab.nav-link(data-coreui-toggle='tab' data-coreui-target='#contact' type='button' role='tab' aria-controls='contact' aria-selected='false') Contact
#myTabContent.tab-content
#home.tab-pane.fade.active.show(role='tabpanel' aria-labelledby='home-tab')
p
| Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
#profile.tab-pane.fade(role='tabpanel' aria-labelledby='profile-tab')
p
| Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
#contact.tab-pane.fade(role='tabpanel' aria-labelledby='contact-tab')
p
| Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
p.text-body-secondary.small
| To help fit your needs, this works with
code
= '<ul>'
| -based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using
code
= '<nav>'
| , you shouldn’t add
code role="tablist"
| directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple
code
= '<div>'
| ) and wrap the
code
= '<nav>'
| around it.
+example('https://coreui.io/docs/components/navs-tabs/#javascript-behavior')
nav
#nav-tab.nav.nav-tabs.mb-3(role='tablist')
button#nav-home-tab.nav-link.active(data-coreui-toggle='tab' data-coreui-target='#nav-home' type='button' role='tab' aria-controls='nav-home' aria-selected='true') Home
button#nav-profile-tab.nav-link(data-coreui-toggle='tab' data-coreui-target='#nav-profile' type='button' role='tab' aria-controls='nav-profile' aria-selected='false') Profile
button#nav-contact-tab.nav-link(data-coreui-toggle='tab' data-coreui-target='#nav-contact' type='button' role='tab' aria-controls='nav-contact' aria-selected='false') Contact
#nav-tabContent.tab-content
#nav-home.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='nav-home-tab')
p
| Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
#nav-profile.tab-pane.fade(role='tabpanel' aria-labelledby='nav-profile-tab')
p
| Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
#nav-contact.tab-pane.fade(role='tabpanel' aria-labelledby='nav-contact-tab')
p
| Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
p.text-body-secondary.small The tabs plugin also works with pills.
+example('https://coreui.io/docs/components/navs-tabs/#javascript-behavior')
ul#pills-tab.nav.nav-pills.mb-3(role='tablist')
li.nav-item(role='presentation')
button#pills-home-tab.nav-link.active(data-coreui-toggle='pill' data-coreui-target='#pills-home' type='button' role='tab' aria-controls='pills-home' aria-selected='true') Home
li.nav-item(role='presentation')
button#pills-profile-tab.nav-link(data-coreui-toggle='pill' data-coreui-target='#pills-profile' type='button' role='tab' aria-controls='pills-profile' aria-selected='false') Profile
li.nav-item(role='presentation')
button#pills-contact-tab.nav-link(data-coreui-toggle='pill' data-coreui-target='#pills-contact' type='button' role='tab' aria-controls='pills-contact' aria-selected='false') Contact
#pills-tabContent.tab-content
#pills-home.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='pills-home-tab')
p
| Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
#pills-profile.tab-pane.fade(role='tabpanel' aria-labelledby='pills-profile-tab')
p
| Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
#pills-contact.tab-pane.fade(role='tabpanel' aria-labelledby='pills-contact-tab')
p
| Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
p.text-body-secondary.small And with vertical pills.
+example('https://coreui.io/docs/components/navs-tabs/#javascript-behavior')
.d-flex.align-items-start
#v-pills-tab.nav.flex-column.nav-pills.me-3(role='tablist' aria-orientation='vertical')
button#v-pills-home-tab.nav-link(data-coreui-toggle='pill' data-coreui-target='#v-pills-home' type='button' role='tab' aria-controls='v-pills-home' aria-selected='false') Home
button#v-pills-profile-tab.nav-link(data-coreui-toggle='pill' data-coreui-target='#v-pills-profile' type='button' role='tab' aria-controls='v-pills-profile' aria-selected='false') Profile
button#v-pills-messages-tab.nav-link(data-coreui-toggle='pill' data-coreui-target='#v-pills-messages' type='button' role='tab' aria-controls='v-pills-messages' aria-selected='false') Messages
button#v-pills-settings-tab.nav-link.active(data-coreui-toggle='pill' data-coreui-target='#v-pills-settings' type='button' role='tab' aria-controls='v-pills-settings' aria-selected='true') Settings
#v-pills-tabContent.tab-content
#v-pills-home.tab-pane.fade(role='tabpanel' aria-labelledby='v-pills-home-tab')
p
| Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.
#v-pills-profile.tab-pane.fade(role='tabpanel' aria-labelledby='v-pills-profile-tab')
p
| Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
#v-pills-messages.tab-pane.fade(role='tabpanel' aria-labelledby='v-pills-messages-tab')
p
| Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
#v-pills-settings.tab-pane.fade.active.show(role='tabpanel' aria-labelledby='v-pills-settings-tab')
p
| Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
