Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

navbar

v1.0.0arrow_drop_down
v1.0.0
STATUS
Passing
DOWNLOADS
415
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
11 KB
subject
The general visual variant a the Navbar. Use in combination with the `bg` prop, `background-color` utilities, or your own background styles.
1 contributor
Use navbar in your project ?
Copied
npm i @bit/react-bootstrap.react-bootstrap.navbar
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

The general visual variant a the Navbar. Use in combination with the bg prop, background-color utilities, or your own background styles.

The breakpoint, below which, the Navbar will collapse. When true the Navbar will always be expanded regardless of screen size.

A convenience prop for adding bg-* utility classes since they are so commonly used here. light and dark are common choices but any bg-* class is supported, including any custom ones you might define.

Pairs nicely with the variant prop.

Create a fixed navbar along the top or bottom of the screen, that scrolls with the page. A convenience prop for the fixed-* positioning classes.

Position the navbar at the top or bottom of the viewport, but only after scrolling past it. . A convenience prop for the sticky-* positioning classes.

Not supported in <= IE11 and other older browsers without a polyfill

Set a custom element for this component.

A callback fired when the <Navbar> body collapses or expands. Fired when a <Navbar.Toggle> is clicked and called with the new expanded boolean value.

A callback fired when a descendant of a child <Nav> is selected. Should be used to execute complex closing or other miscellaneous actions desired after selecting a descendant of <Nav>. Does nothing if no <Nav> or <Nav> descendants exist. The callback is called with an eventKey, which is a prop from the selected <Nav> descendant, and an event.

function (
 eventKey: mixed,
 event?: SyntheticEvent
)

For basic closing behavior after all <Nav> descendant onSelect events in mobile viewports, try using collapseOnSelect.

Note: If you are manually closing the navbar using this OnSelect prop, ensure that you are setting expanded to false and not toggling between true and false.

Toggles expanded to false after the onSelect event of a descendant of a child <Nav> fires. Does nothing if no <Nav> or <Nav> descendants exist.

Manually controlling expanded via the onSelect callback is recommended instead, for more complex operations that need to be executed after the select event of <Nav> descendants.

Controls the visiblity of the navbar body

The ARIA role for the navbar, will default to ‘navigation’ for Navbars whose as is something other than <nav>.