NavTab

Official Docs

Basic

Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.

Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. eserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet.

Pills

Underline

Dropdowns

withIcon

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

Line

This is some placeholder content the Disabled tab's associated content.

Themes

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, ducimus porro unde deserunt tenetur voluptatibus sunt nesciunt quod? Facere impedit porro autem harum tenetur laudantium reprehenderit ipsum iusto omnis magni.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam repellat pariatur sunt voluptas amet molestiae fugiat tempore officiis eligendi laborum error provident a aliquam quisquam consequatur facilis at ab voluptates harum delectus, unde quos! Ipsum corrupti alias ducimus nemo, asperiores odit rem eum minima ratione provident temporibus eius voluptatibus, nobis corporis possimus distinctio quisquam? Necessitatibus nisi dolore quae numquam modi eum tempora, cum nemo fugiat possimus in consectetur molestias, repellat voluptas dolores molestiae autem quidem. Exercitationem doloremque reprehenderit hic consequuntur odio neque! Itaque at libero dolor voluptas inventore ea, maxime officiis, similique veritatis perspiciatis...

This is some placeholder content the Disabled tab's associated content.

richContent

Options

Reference	Details
`Base nav`	Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. 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.
`Tabs`	Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.
`Pills`	Take that same HTML, but use `.nav-pills` instead:
`Underline`	Take that same HTML, but use `.nav-underline` instead:
`Fill and justify`	Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
`Tabs with dropdowns`	Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
`JavaScript behavior`	Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
`Vertical`	And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
`withIcon`	Use icon tabs
`Line`	Use `line` tabs as adding class `.nav-line-tabs`
`Themes`	Use `themes` tabs as adding class `.nav-theme-tabs-{colors}`. Colors can be use mapping color from `{$theme-colors}`.
`richContent`	Use `richContent` tabs as adding class `.nav-rich-content-tabs` and then add class `.nav-rich-content-{colors}`. Colors can be use mapping color from `{$theme-colors}`.
`Documentations`	Please visit: https://getbootstrap.com/docs/5.3/components/navs-tabs/