{({ currentLayout, inverseColor }) => { return ( document.getElementById('menuMountNode'), dropdownMenuToggleButtonLabel: 'Toggle Menu', dropdownMenuLabel: 'Main Menu', onDropdownMenuToggle: (isMenuOpen) => { this.setState({ isSmallViewportMenuOpen: isMenuOpen }) }, alternativeTitle: inverseColor ? 'Overview' : undefined }} renderBrand={ )} iconBackground="#0097D3" href="/#TopNavBar" /> } renderMenuItems={ `${hiddenChildrenCount} More`} renderHiddenItemsMenuTriggerAriaLabel={( hiddenChildrenCount ) => `${hiddenChildrenCount} more menu items`} > Overview Admin Settings Maps Assessments Community } renderActionItems={ `${hiddenChildrenCount} more actions`} > } onClick={() => { console.log('Info') }} > Info } onClick={() => { console.log('Alerts') }} > Alerts } renderUser={ Log In/Register } themeOverride={{ // For example demo smallViewportZIndex: 9999, smallViewportTrayFixTopPosition: this.state.isSecondaryNavigation ? `57px` : '56px' }} /> ) }}

Page Content

Reprehenderit magna aliquip laboris nostrud. Culpa aliqua ex laboris pariatur quis laboris ipsum culpa quis aliquip nisi veniam consectetur amet. Cillum dolore officia irure est velit.

Mollit laboris anim dolor amet mollit ut in duis quis anim. Minim sit aute laborum sunt ad veniam. Labore id in enim labore culpa. Ullamco irure magna enim excepteur nulla incididunt laboris. Dolor quis duis Lorem ad. Veniam non eu nisi labore duis est quis. Laborum aute quis velit reprehenderit consequat esse qui tempor ad in et voluptate.

Irure velit duis amet pariatur anim nostrud sit magna anim non do ea exercitation. Adipisicing veniam culpa do nostrud nisi. Do aliqua cupidatat ad fugiat labore ad non fugiat. Laboris et tempor sunt velit incididunt sunt enim occaecat do aliquip nulla magna.

) } } render() ``` #### Secondary navigation In case TopNavBar is used as secondary navigation (e.g. LTI tools menu in Canvas), use the inverse color version. The `inverseColor` prop displays the navbar with inverted colors. In the smallViewport layout of the "secodary navigation" mode, don’t show the branding, instead display the current/selected page title by passing the `smallViewportConfig.alternativeTitle` prop. See the example above (toggle secondary navigation mode). ### Items The main building block of TopNavBar is the ``. The items have 4 variants, can have icons, avatars, submenus, tooltips, etc. #### Variants The items can display as text, button, icon only or avatar only. The text and button versions can have icons and avatars, and all variants can have submenus, popovers and tooltips. Not all 4 variation are available in every container, e.g.: items with avatars can only be used in ``. In small viewport mode, items in `` and `` will be converted to dropdown menu items ([Drilldown](Drilldown) options), thus displaying differently (e.g.: all variants display as text options and icons are not rendered). The items in `` will be converted to `icon` variants (and are required to have `renderIcon` prop), and the list will get truncated when there is not enough space to display all actions. ```js --- type: example --- Default variant } > Default with icon Default with avatar Button variant } > Button with icon Button with avatar } tooltip="Icon variant" > Icon variant Avatar variant ``` #### Dropdowns `` can display 3 type of dropdowns. ##### Submenu The most common use case is when we want to open a submenu by clicking on the item. The `renderSubmenu` prop accepts a [Drilldown](Drilldown) component, and the toggle logic is handled by `TopNavBar.Item`. The submenu can have multiple levels. ##### Custom Popover If custom content needs to be displayed in the dropdown (e.g. search feature), use the `customPopoverConfig` prop. It accepts a config object of [Popover](Popover) component props (except `renderTrigger`, since the item itself is the trigger). **Note**: in "smallViewport" mode items in `TopNavBar.ActionItems` can display custom popovers, but since the items in `TopNavBar.MenuItems` are converted to Drilldown options, custom popovers are not recommended to use in menu items. ##### Tooltip The `tooltip` prop can display extra information on hover/focus. Tooltips can be useful for `variant="icon"` or `variant="avatar"` type menu items where there is no visible text. It accepts either a string or a config object containing a subset of props from [Tooltip](Tooltip). **Note**: items rendered as Drilldown options don't render tooltips. ```js --- type: example ---

{() => ( `${hiddenChildrenCount} More`} renderHiddenItemsMenuTriggerAriaLabel={( hiddenChildrenCount ) => `${hiddenChildrenCount} more menu items`} > Link One Link Two Link Three Level 2 Option One Level 2 Option Two )} > Menu Item with submenu )} renderActionItems={( `${hiddenChildrenCount} More`} renderHiddenItemsMenuTriggerTooltip={( hiddenChildrenCount ) => `${hiddenChildrenCount} more menu items`} > } > Action Item with tooltip } customPopoverConfig={{ on: 'click', placement: 'bottom end', shouldContainFocus: true, children: ( ) }} > Action Item with popover )} /> )}

``` ##### Full width dialog on small viewports In "smallViewport" mode, due to the lack of space, some features might be rendered in a special dialog that covers the whole navbar (e.g.: search feature). This feature is settable via the `smallViewportConfig.renderInPlaceDialogConfig` prop of `TopNavBar.Layout`, and accepts a config object. It can also trap focus. **Note**: please make sure to set an element to return the focus to upon closing the dialog via the `returnFocusElement` prop. ```js --- type: example --- class InPlaceDialogExample extends React.Component { state = { isSearchOpen: false, searchInputValue: '' } toggleSearch(isOpen) { this.setState({ isSearchOpen: isOpen }) } render() { return ( {({ currentLayout }) => ( { this.toggleSearch(false) }, closeButtonLabel: 'Close Search and return to Navigation', returnFocusElement: () => document.getElementById('Search'), shouldCloseOnEscape: true, shouldCloseOnDocumentClick: false, shouldContainFocus: false, content: ({ closeInPlaceDialog }) => ( Search} renderBeforeInput={() => } placeholder="Search..." onChange={(_event, value) => { this.setState({ searchInputValue: value }) }} value={this.state.searchInputValue} onKeyDown={(event) => { if (event.key === 'Enter') { event.preventDefault() event.stopPropagation() console.log(`Search input submitted value "${this.state.searchInputValue}".`) this.setState({ searchInputValue: '' }) if (currentLayout === 'smallViewport' && typeof closeInPlaceDialog === 'function') { closeInPlaceDialog() } } }} themeOverride={(_theme, globalTheme) => ({ focusOutlineColor: globalTheme.colors.borderLightest })} /> ) } }} renderActionItems={( `${hiddenChildrenCount} More`} renderHiddenItemsMenuTriggerAriaLabel={( hiddenChildrenCount ) => `${hiddenChildrenCount} more menu items`} > } tooltip="Opens search dialog" onClick={() => { this.toggleSearch(true) }} > Search )} /> )} ) } } render() ``` #### Color override example for more complex customization There's no one-size-fits-all solution when it comes to coloring the items in `TopNavBar.Item`, or anywhere else. You have to override the instUI component that is rendered in place. In the following example we override `Text` and `BaseButton`. ```js --- type: example --- {({ currentLayout, inverseColor }) => { return ( )} iconBackground="#0097D3" href="/#TopNavBar" /> } renderMenuItems={ `${hiddenChildrenCount} More`} renderHiddenItemsMenuTriggerAriaLabel={( hiddenChildrenCount ) => `${hiddenChildrenCount} more menu items`} > Overview Admin Settings Maps Assessments Community } renderActionItems={ `${hiddenChildrenCount} more actions`} > } onClick={() => { console.log('Info') }} > Info } onClick={() => { console.log('Alerts') }} > Alerts } renderUser={ Log In/Register } themeOverride={{ // For example demo smallViewportZIndex: 9999, smallViewportTrayFixTopPosition: true ? `57px` : '56px' }} /> ) }} ```