RUI.next

Navigation-Layout
NavBar

NavBar

NavBar locates above the app content area, below the system status bar, and provides navigation capabilities.

<NavBar leftContent="Back" rightContent="Close">Page title</NavBar>
<NavBar leftContent="Back" rightContent="Close">Page title</NavBar>

Example

Basic usage of NavBar component.

Dark mode
Dark mode title


Light mode

API

PropertiesDescriptionTypeDefault
modestyle mode, optional value: dark, lightstringdark
iconappears on the leftmost icon placeholderReactNode-
leftContentthe left contentany-
rightContentthe right contentany-
onLeftClickthe click callback on the left(e: Object): void-