From 35b25843bc100dff05146f5e99ca3cb10da105bc Mon Sep 17 00:00:00 2001
From: Calvin To
When the role is "tablist", NavLink focus is managed according to the ARIA authoring practices for tabs: -https://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel
'tabs'
| 'pills'
The visual variant of the nav items.
'nav'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Nav from 'react-bootstrap/Nav'
Copy import code for the Nav componentName | Type | Default | Description |
---|---|---|---|
as | elementType | <div> | You can use a custom element type for this component. |
role | string | The ARIA role of the component | |
bsPrefix | string | 'nav-item' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
import Nav from 'react-bootstrap/Nav'
Copy import code for the Nav componentName | Type | Default | Description |
---|---|---|---|
active | boolean | The active state of the NavItem item. | |
as | elementType | <a> | You can use a custom element type for this component. |
disabled | boolean | false | The disabled state of the NavItem item. |
eventKey | any | Uniquely idenifies the | |
variant | 'tabs' | 'pills' | The visual variant of the nav items. | |
bsPrefix | string | 'nav' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
import Nav from 'react-bootstrap/Nav'
Copy import code for the Nav componentName | Type | Default | Description |
---|---|---|---|
as | elementType | <div> | You can use a custom element type for this component. |
role | string | The ARIA role of the component | |
bsPrefix | string | 'nav-item' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
import Nav from 'react-bootstrap/Nav'
Copy import code for the Nav componentName | Type | Default | Description |
---|---|---|---|
active | boolean | The active state of the NavItem item. | |
as | elementType | <a> | You can use a custom element type for this component. |
disabled | boolean | false | The disabled state of the NavItem item. |
eventKey | any | Uniquely identifies the | |
href | string | The HTML href attribute for the | |
onSelect | function | A callback fired when the
| |
role | string | The ARIA role for the | |
bsPrefix | string | 'nav-link' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
import NavDropdown from 'react-bootstrap/NavDropdown'
Copy import code for the NavDropdown componentName | Type | Default | Description |
---|---|---|---|
active | boolean | Style the toggle NavLink as active | |
disabled | boolean | Disables the toggle NavLink | |
id required | string|number | An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers. | |
menuRole | string | An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown | |
onClick | function | An | |
renderMenuOnMount | boolean | Whether to render the dropdown menu in the DOM before the first time it is shown | |
rootCloseEvent | string | Which event when fired outside the component will cause it to be closed. -see DropdownMenu for more details | |
title required | node | The content of the non-toggle Button. | |
bsPrefix | string | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |