# Navs > Navigation available in Bootstrap share general markup and styles, from the base `` class > to the `active` and `disabled` states. Swap modifier props to switch between each style. ```html
Active Link Another Link Disabled
``` ## Overview The base `` component is built with flexbox and provides 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. No active states are included in the base nav. ## Link appearance Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These variants are mutually exclusive - use only one style or the other. ### Tab style Make the nav look like tabs by setting the `tabs` prop. ```html
Active Link Another Link Disabled
``` ### Pill style Use the pill style by setting the `pills` prop. ```html
Active Link Another Link Disabled
``` ### Small Make the nav smaller by setting the `small` prop. ```html
Active Link Another Link Disabled
``` ## Fill and justify NEW in 2.0.0-rc19 Force your `` content to extend the full available width. ### Fill To proportionately fill all available space with your `` components, set the `fill` prop. Notice that all horizontal space is occupied, but not every nav item has the same width. ```html
Active Link Link with a long name Disabled
``` ### Justified For equal-width elements, set the `justified` prop instead. All horizontal space will be occupied by nav links, but unlike `fill` above, every `` will be the same width. ```html
Active Link Link with a long name Disabled
``` ## Alignment NEW in 2.0.0-rc19 To align your `` components, use the `align` prop. Available values are `left`, `center` and `right`. ```html
Active Link Link with a long name Disabled
``` ## Vertical variation By default `` appear on a horizontal line. Stack your navigation by setting the `vertical` prop. ```html
Active Link Another Link Disabled
``` ## Dropdown support Use `` to place dropdown items within your nav. ```html
Active Link one two three
``` Sometimes you want to add your own class names to the generated dropdown toggle button, that by default have the classes `nav-link` and `dropdown-toggle`. Use the `toggle-class` prop to add them (like above) which will produce something like: ```html ``` Refer to [``](/docs/components/dropdown) for a list of supported sub-components. ### Optionally scoped default slot NEW in 2.0.0-rc.20 The dropdown default slot is optionally scoped with the following scope available: | Property or Method | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | `hide()` | Can be used to close the dropdown menu. Accepts an optional boolean argument, which if `true` returns focus to the toggle button | ## Using in navbar Prop `is-nav-bar` has been deprecated and will be removed in a future release. ## Tabbed local content support See the [``](/docs/components/tabs) component for creating tabbable panes of local content (not suited for navigation). ## Accessibility If you're using `` to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of ``, or wrap a `