Overview

The navbar or the app header provides context through globally accessible menu options and positions a consistent component to connect various Trimble applications and contains the main navigation for your application.

Blue Variant

An alternative blue variant is available. Add the class `navbar-blue` to the navbar.

You can omit the navbar menu button if it isn’t needed.

import Navbar from `@trimbleinc/modus-react-bootstrap/Navbar`
NameTypeDefaultDescription
as
elementType

Set a custom element for this component.

bg
string

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.

collapseOnSelect
boolean
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.

expand
true | 'sm' | 'md' | 'lg' | 'xl'
true

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

expanded
boolean
controlled by: onToggle, initial prop: defaultExpanded

Controls the visiblity of the navbar body

fixed
'top' | 'bottom'

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.

onSelect
function

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.

onToggle
function
controls expanded

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.

role
string
'navigation'

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

sticky
'top'

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

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

variant
'light' | 'dark'
'light'

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

bsPrefix
string
'navbar'
import Navbar.Brand from `@trimbleinc/modus-react-bootstrap/Navbar.Brand`
NameTypeDefaultDescription
as
elementType

Set a custom element for this component.

href
string

An href, when provided the Brand will render as an <a> element (unless as is provided).

bsPrefix
string
'navbar'
import Navbar.Toggle from `@trimbleinc/modus-react-bootstrap/Navbar.Toggle`
NameTypeDefaultDescription
as
elementType
<button>
children
node

The toggle content. When empty, the default toggle will be rendered.

label
string
'Toggle navigation'

An accessible ARIA label for the toggler button.

onClick
function
bsPrefix
string
'navbar-toggler'
import Navbar.Collapse from `@trimbleinc/modus-react-bootstrap/Navbar.Collapse`
NameTypeDefaultDescription
bsPrefix
string
'navbar-collapse'