Pill layouts
Varations of basic, outline and toolbar pill stylesBasic pills
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-pills to display nav links as pills.
Basic rounded
Pills are using global border radius variable in their CSS. You can
either override it globally or locally using our utility classes. To use, add
.rounded-pill to all .nav-link elements.
Justified pills
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
Justified rounded
The same logic also works in navigations with
.nav-justified or .nav-fill modifier classes - just add
.rounded-pill class to nav link elements for fully rounded corners
Outline pills
A classic style of horizontal nav that looks similar to outline buttons
and list groups - outline pills. To use, simply add .nav-pills-outline
class to the base .nav-pills container
Outline rounded
Outline pills can have fully rounded corners, the base container doesn't
require any additional modifier classes. Just add .rounded-pill utility
class to each .nav-link element
Outline justified
Rounded corners in justified pills. You can also use our flex utility
classes to stack pills vertically on different screen sizes by adding
.flex-column.flex-[breakpoint]-row classes
Outline rounded justified
To use rounded corners in justified pills, add
.rounded-pill to all links in .nav-pills-outline
container. You can also use utility classes to modify appearance on different screen
sizes
Pills toolbar
You can display pills as a bordered toolbar. All nav items have negative left margin that equals border width. Be careful with overriding wrapping behaviour as it can break the layout
Rounded toolbar
To make pills in the toolbar rounded, add
.rounded-start-pill and .rounded-end-pill classes to the
first/last links. For better horizontal appearance, you can also use padding utility
classes
Toolbar justified
Pills toolbar can be also stretched to fill all available space. Bear in mind that using flex utility classes to transform horizontal nav to vertical on certain breakpoints is not yet supported
Rounded justified toolbar
Use .rounded-start-pill and .rounded-end-pill
classes to the first/last links. If you need to use 6+ items, consider using default
or outline style instead as they support stacking layout
Outline group
Display pills as a group of nav items within a custom container. You can control inner container padding, border width/color, border radius and container width with our utility classes
Rounded outline group
If you add .rounded-pill class to all nav links and parent
container, pills group will have fully rounded mobile-like nav items. For a full
width, remove .d-inline-flex from pills container
Group with background
Same as outline example above, but with a custom background color. Instead of border utility classes, you can also color classes to set custom background color or a mix of both
Rounded group with background
Fancy mobile-like toolbar with a custom background color and fully
rounded nav links. To get this style, just add .rounded-pill to all nav
links and base pills container
Javascript behaviour
Positioning, stacked optionsBasic pills
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
Pills with dropdown
Pills can be toggled from dropdown menu items, if they contain
data-bs-toggle="tab" attribute with corresponding content pane ID. Call
the dropdown in a regular way via data-bs-toggle="dropdown" in nav link
Vertical pills
Vertical pills styling and alignment optionsStacked pills
Stack your navigation by changing the flex item direction with the
.flex-column utility. Use responsive versions of you need to stack them
on some viewports only
Stacked with icons/badges
Vertical pills support optional elements such as icon and badges, just like a regular navigation. All elements can be aligned to the left, right, or both. Use flex utilities for a perfect alignment
Stacked outline
To stack outline pills, add .nav-pills-outline.flex-column
to nav container. You can also make horizontal nav stackable on certain viewports
with responsive classes
Stacked toolbar
Toolbar also can be stacked, but it doesn't support responsive classes
out of the box as all stylings are assigned to .flex-column class. You
can customize it by yourself in CSS if necessary
Left alignment
left using a set of our
flexbox and margin utility classes. Both containers are also stackable on
small screens
Right alignment
right using a set of
our flexbox and margin utility classes. Both containers are also stackable
on small screens
Optional styling and elements
Display icons, labels, badges and images in nav pillsCentered pills
By default, pills are left aligned. But you can control it with our flex
utility classes. To center pills horizontally, add
.justify-content-center to the base .nav-pills container
Right alignment
The same as centered pills, but with a different class name -
.justify-content-end. You can also use responsive variations to change
pills alignment on different breakpoints
Pills 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
Rounded style
Our utility classes allows us to fully control the appearance and style
of almost elements. In rounded pills you can also add .rounded-pill to
the close button of remove background completely
Multiline pills
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
Pills support icons in different sizes and styles. Background can be
controlled with .bg-[color].bg-opacity-[value] classes, but mind the
inversed background color in active state
Pills 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
Pills 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
Pills with badges
Display badges on the left/right sides and in empty pill.
Here choosing a suitable badge style is recommended, because in active state
background color matches theme's primary color
