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
