www/docs/components/navs.mdx
import NavAlignment from '!!raw-loader!../examples/Nav/Alignment'; import NavBasic from '!!raw-loader!../examples/Nav/Basic'; import NavList from '!!raw-loader!../examples/Nav/List'; import NavDropdown from '!!raw-loader!../examples/Nav/Dropdown'; import NavDropdownImpl from '!!raw-loader!../examples/Nav/DropdownImpl'; import NavFill from '!!raw-loader!../examples/Nav/Fill'; import NavJustified from '!!raw-loader!../examples/Nav/Justified'; import NavStacked from '!!raw-loader!../examples/Nav/Stacked'; import Tabs from '!!raw-loader!../examples/Nav/Tabs'; import Pills from '!!raw-loader!../examples/Nav/Pills'; import Underline from '!!raw-loader!../examples/Nav/Underline';
Navigation bits in Bootstrap all share a general Nav
component and styles. Swap variants 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.
:::caution
The basic, variant-less, Nav component does not include any
active prop styling!
:::
<CodeBlock language="jsx" live> {NavBasic} </CodeBlock><Nav> markup is very flexible and styling is controlled via classes so you can
use whatever elements you like to build your navs. By default <Nav> and <Nav.Item> both
render <div>s instead of <ul> and <li> elements respectively.
This because it's possible (and common) to leave off the <Nav.Item>'s and
render a <Nav.Link> directly, which would create invalid markup by default (ul > a).
When a <ul> is appropriate you can render one via the as prop; be sure to
also set your items to <li> as well!
You can control the direction and orientation of the
Nav by making use of the <DocLink path="/utilities/flex#justify-content">flexbox utility</DocLink>
classes. By default, navs are left-aligned, but that is easily changed to center or right-aligned.
Create stacked navs by changing the flex item direction with the .flex-column class, or
your own css. You can even use the responsive versions to stack in some viewports but not
others (e.g. .flex-sm-column).
Visually represent nav items as "tabs". This style pairs nicely with tabbable regions created by our Tab components.
Note: creating a vertical nav (.flex-column) with tabs styling is unsupported by Bootstrap's
default stylesheet.
Force the contents of your nav to extend the full available width. To
proportionately fill the space use fill. Notice that the
nav is the entire width but each nav item is a different size.
If you want each NavItem to be the same size use justify.
You can mix and match the Dropdown components with the NavLink and NavItem components to create a Dropdown that plays well in a Nav component
<CodeBlock language="jsx" live> {NavDropdownImpl} </CodeBlock>The above demonstrates how flexible the component model can be. But if
you didn't want to roll your own versions we've included a
straight-forward <NavDropdown> that works for most cases.