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

Behaviors

This component supports the following behaviors:

Properties

footerTemplate

Optional template for a footer at the bottom of the NavPanel. When set, the footer is shown below the scrollable nav content (e.g. for theme switcher or sidebar toggle, similar to Nextra).

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>

<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>

scrollStyle

default: "normal"

This property determines the scrollbar style. Options: "normal" uses the browser's default scrollbar; "overlay" displays a themed scrollbar that is always visible; "whenMouseOver" shows the scrollbar only when hovering over the scroll container; "whenScrolling" displays the scrollbar only while scrolling is active and fades out after 400ms of inactivity.

Available values: normal (default), overlay, whenMouseOver, whenScrolling

showScrollerFade

default: true

When enabled, displays gradient fade indicators at the top and bottom edges of the navigation panel when scrollable content extends beyond the visible area. The fade effect provides a visual cue to users that additional content is available by scrolling. The indicators automatically appear and disappear based on the scroll position. This property only works with "overlay", "whenMouseOver", and "whenScrolling" scroll styles.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• content: The content area within the NavPanel component.
• footer: Optional footer area at the bottom of the NavPanel (e.g. for theme switcher or layout toggle). Shown only when footerTemplate is set.
• logo: The logo area within the NavPanel component.

Styling

Theme Variables