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

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