Basic tabs
Bordered tabs layout with optional overline borderBasic tabs
All navigations in Limitless share general markup and styles. All ot
them require .nav class for basic styling and modifier nav type class.
Use .nav-tabs to display nav links as tabs.
Basic justified
Force your .nav ’s contents to extend the full width. To
proportionately fill all available space with your nav items, use
.nav-fill. For equal-width elements, use .nav-justified
Basic roundless
Use .rounded-top-0 class in .nav-link element
to remove rounded corners from links. Additionally you can use
.border-top-0 to remove top border in containers with top border
Justified roundedless
Similar to tabs with auto width, use .rounded-top-0 in nav
link container to make corners roundless. Useful when tabs are displayed in toolbars
or to match styling of parent container
Highlighted tabs
By default, border on all sides in active tab share the same color. You
can highlight top border in active tab by adding .nav-tabs-highlight
class to the base .nav container
Highlighted justified
To highlight top border in active tab in nav container that has equal
nav link widths, add .nav-tabs-highlight class to
.nav-tabs-justified or .nav-tabs-filled container
Undeline tabs
Display onlybottom border in active tab
Underline tabs
An emphasized tab that is always paired with an attached background container. It is commonly used for larger content areas. Active tab is highlighted with thick bottom line
Underline justified
Underline always takes all available space and always matches tab width.
Use both .nav-tabs-underline and
.nav-tabs-[justfied|filled] classes in base nav container
Underline borderless
By default, all tab layouts include bottom border for better visual
separation. You can hide it by adding our .border-bottom-0 utility
class to the base .nav container
Underline borderless justified
Justified tabs also can be borderless. This option can be very useful when tabs are displayed in some container that has slightly darker backround color, e.g. sub-pages
Overline tabs
Display onlytop border in active tab
Overline tabs
Similar to underline layout, overline tabs are commonly used as navigation in bottom areas, e.g. card footer. In overline tabs, active tab is highlighted with thick top line
Overline justified
Overline always takes all available space and always matches tab width.
Use both .nav-tabs-overline and
.nav-tabs-[justfied|filled] classes in base nav container
Overline borderless
By default, overline tab layout include top border for better visual
separation. You can hide it by adding our .border-top-0 utility class
to the base .nav container
Overline borderless justified
Justified tabs also can be borderless. This option can be very useful when tabs are displayed in some container that has slightly darker backround color, e.g. sub-pages
Vertical tabs
Stack tabs navigation and display it on the left or right sideLeft alignment
.nav-tabs-vertical and .nav-tabs-vertical-start
classes to the base tabs container.nav-tabs-vertical
class.
Right alignment
.nav-tabs-vertical and .nav-tabs-vertical-end classes to
the base tabs container.nav-tabs-vertical nav-tabs-vertical-right class.
Solid tabs
Make tabs stand out and display them as toolbarSolid tabs
Solid tabs can be displayed as a toolbar. Our custom
.nav-tabs-solid class adds background color to the nav and applies our
regular active component item style
Solid justified
Force solid tabs contents to extend the full width. To proportionately
fill all available space with your nav items, use .nav-fill. For
equal-width elements, use .nav-justified
Solid bordered tabs
Add border to solid tabs with .border utility class, if you
need to display them as a stand alone component. Optionally use
.rounded-[start|end] to round left or right corners only
Solid bordered justified
To stretch solid tabs so that they either have equal width or
proportionally fill all 100% width. Use
.nav-[justified|filled] .nav-tabs-solid along with .border
class
Colored tabs
You can use any background color from our color system in solid tabs.
Use .nav-tabs-solid.nav-tabs-solid-dark and .bg-[color] to
apply custom styles in active state
Colored justified
The same as in tabs with auto width, but including either
.nav-justified or .nav-filled classes depending on fill
option. Use our border radius utility classes to rounded nav corners
Javascript behaviour
Positioning, stacked optionsBasic tabs
Use the tab JavaScript plugin to extend our navigational tabs and pills
to create tabbable panes of local content. Just add
.data-bs-toggle="tab" to all nav links and assign ID's to content panes
Tabs with dropdown
Tabs can be toggled from dropdown menu items, if they contain
data-bs-toggle="tab" with corresponding content pane ID. Call the
dropdown in a regular way via data-bs-toggle="dropdown" in nav link
Optional styling and elements
Display icons, labels, badges and images in nav tabsCentered position
By default, tabs are left aligned. But you can control it with our flex
utility classes. To center tabs horizontally, add
.justify-content-center to the base .nav-tabs container
Right position
The same as centered tabs, but with a different class name -
.justify-content-end. You can also use responsive variations to change
tabs alignment on different breakpoints
Tabs with close button
This style is usually used for dynamic navigation with some edit/remove
functionality. Use flex utility classes in nav links and include a span
element with .nav-btn-close class
Justified tabs with close button
Justified and filled tabs here require additional
.justify-content-center class in .nav-link element to
center tab text, because by default the text is aligned to the left
Multiline tabs
To display a large sized navigation with title and subtitle, use 2
elements inside .nav-link container. You can style up the text as you
want with text utility classes
Multiline with icon
Tabs support icons in different sizes and styles. Background can be
controlled with .bg-[color].bg-opacity-[value] classes, text color can
be changed via our text color utility classes
Tabs with icons
Icons are supported in all navigation types, in both left and right
alignment options. They don't have spacing by default, so use .ms-2 to
add left spacing and .me-2 to add right spacing
Tabs with labels
Text labels with custom style are using .badge component,
but with slightly rounded corners. Empty labels are hidden by default, so it's
recommended to always use pill text as well
Tabs with badges
Display badges on the left/right sides and in empty tab.
Tabs in all states use the same color theme, so feel free to choose any badge style
or color. Use margin utility classes to add spacing
