ArcaneNavDropdown

Use navigation menus for top-level navigation with richer dropdown content.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: navigation-menu

Preview + Code

Products



Code

ArcaneNavDropdown(
  label: 'Products',
  width: '280px',
  content: const ArcaneBox(
    style: ArcaneStyleData(
      padding: PaddingPreset.md,
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.sm,
    ),
    children: [Text('Core UI'), Text('Documentation'), Text('Templates')],
  ),
)

ArcaneNavDropdown#

Use navigation menus for top-level navigation with richer dropdown content.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/navigation/nav_dropdown.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneNavDropdown

Use navigation menus for top-level navigation with richer dropdown content.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: navigation-menu

Preview + Code

Products



Code

ArcaneNavDropdown(
  label: 'Products',
  width: '280px',
  content: const ArcaneBox(
    style: ArcaneStyleData(
      padding: PaddingPreset.md,
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.sm,
    ),
    children: [Text('Core UI'), Text('Documentation'), Text('Templates')],
  ),
)

ArcaneNavDropdown#

Use navigation menus for top-level navigation with richer dropdown content.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/navigation/nav_dropdown.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneNavDropdown

Use navigation menus for top-level navigation with richer dropdown content.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: navigation-menu

Preview + Code

Products



Code

ArcaneNavDropdown(
  label: 'Products',
  width: '280px',
  content: const ArcaneBox(
    style: ArcaneStyleData(
      padding: PaddingPreset.md,
      display: Display.flex,
      flexDirection: FlexDirection.column,
      gap: Gap.sm,
    ),
    children: [Text('Core UI'), Text('Documentation'), Text('Templates')],
  ),
)

ArcaneNavDropdown#

Use navigation menus for top-level navigation with richer dropdown content.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/navigation/nav_dropdown.dart

See the Component Catalog for the full exported surface and source mapping.