NavPanel

NavPanel is a placeholder within App to define the app's navigation (menu) structure.

Properties

`logoTemplate`

This property defines the logo template to display in the navigation panel with the vertical and vertical-sticky layout.

<App layout="vertical">
  <NavPanel>
    <property name="logoTemplate">
       <H3>
         <Icon name="drive" />
         DriveDiag (Nav)
       </H3>
    </property>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
  </NavPanel>
  <Pages defaultRoute="/">
    <Page url="/">
      <Text value="Home" />
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
  </Pages>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The NavPanel component uses these theme variables to customize its appearance:

backgroundColor
boxShadow
paddingHorizontal
paddingHorizontal-logo-NavPanel
paddingVertical-logo-NavPanel
marginBottom-logo-NavPanel

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-NavPanel	$backgroundColor	$backgroundColor
border-NavPanel	0px solid $borderColor	0px solid $borderColor
borderBottom-NavPanel	none	none
borderBottomColor-NavPanel	none	none
borderBottomStyle-NavPanel	none	none
borderBottomWidth-NavPanel	none	none
borderColor-NavPanel	none	none
borderEndEndRadius-NavPanel	none	none
borderEndStartRadius-NavPanel	none	none
borderHorizontal-NavPanel	none	none
borderHorizontalColor-NavPanel	none	none
borderHorizontalStyle-NavPanel	none	none
borderHorizontalWidth-NavPanel	none	none
borderLeft-NavPanel	none	none
color-NavPanel	none	none
borderLeftStyle-NavPanel	none	none
borderLeftWidth-NavPanel	none	none
borderRight-NavPanel	none	none
color-NavPanel	none	none
borderRightStyle-NavPanel	none	none
borderRightWidth-NavPanel	none	none
borderStartEndRadius-NavPanel	none	none
borderStartStartRadius-NavPanel	none	none
borderStyle-NavPanel	none	none
borderTop-NavPanel	none	none
borderTopColor-NavPanel	none	none
borderTopStyle-NavPanel	none	none
borderTopWidth-NavPanel	none	none
borderHorizontal-NavPanel	none	none
borderVerticalColor-NavPanel	none	none
borderVerticalStyle-NavPanel	none	none
borderVerticalWidth-NavPanel	none	none
borderWidth-NavPanel	none	none
boxShadow-NavPanel	none	none
boxShadow-NavPanel-vertical	4px 0 4px 0 rgb(0 0 0 / 10%)	4px 0 4px 0 rgb(0 0 0 / 10%)
marginBottom-logo-NavPanel	$space-4	$space-4
padding-logo-NavPanel	none	none
padding-NavPanel	none	none
paddingBottom-logo-NavPanel	none	none
paddingBottom-NavPanel	none	none
paddingHorizontal-logo-NavPanel	$space-4	$space-4
paddingHorizontal-NavPanel	0	0
paddingLeft-logo-NavPanel	none	none
paddingLeft-NavPanel	none	none
paddingRight-logo-NavPanel	none	none
paddingRight-NavPanel	none	none
paddingTop-logo-NavPanel	none	none
paddingTop-NavPanel	none	none
paddingVertical-logo-NavPanel	$space-4	$space-4
paddingVertical-NavPanel	none	none

NavLink NoResult