NavPanel

NavPanel defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration.

Key features:

Layout adaptation: Automatically positions navigation horizontally or vertically based on App layout
Navigation organization: Contains NavLink and NavGroup components to build structured menus
Logo integration: Supports custom logo templates in vertical layouts via logoTemplate property
Drawer mode: Can optionally display navigation in a collapsible drawer interface
Theme integration: Inherits styling from the app's theme system for consistent appearance

Properties

`inDrawer` (default: false)

This property determines if the navigation panel is displayed in a drawer.

`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 fallbackPath="/">
    <Page url="/">
      <Text value="Home" />
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
  </Pages>
</App>

Example: logoTemplate

<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 fallbackPath="/">
    <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

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-NavPanel	$backgroundColor	$backgroundColor
backgroundColor-NavPanel-horizontal	$backgroundColor-AppHeader	$backgroundColor-AppHeader
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%)
horizontalAlignment-logo-NavPanel	center	center
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