NavigableDialog

Overview

The Navigable Dialog is a multi-step modal component that provides a consistent way to display content with navigation between different sections. It’s built on top of the DialogContainer component, with additional navigation capabilities.

Usage

<NavigableDialogRoot isOpen={isOpen} onOpenChange={setIsOpen}>
  <NavigableDialogHeader
    title="Example Dialog"
    subTitle="Optional subtitle text"
  />
  
  <NavigableDialogBody>
    <NavigableDialogNav
      items={[
        { id: "general", label: "General", icon: Book2 },
        { id: "security", label: "Security", icon: Key },
      ]}
    />
    <NavigableDialogContent
      items={[
        {
          id: "general",
          content: <div>General settings content</div>
        },
        {
          id: "security",
          content: <div>Security settings content</div>
        },
      ]}
    />
  </NavigableDialogBody>
 
  <NavigableDialogFooter>
    <Button>Save Changes</Button>
  </NavigableDialogFooter>
</NavigableDialogRoot>

Basic Example

Variants

The component accepts all standard DialogContainer props.

Features

Multi-step navigation with sidebar
Icon support for navigation items
Accessible modal implementation
State management between steps
Customizable styling for each section
Full keyboard-navigation support
Responsive design

Props

NavigableDialogRoot

Prop	Type	Default	Description
isOpen	boolean	-	Controls the open state of the dialog
onOpenChange	(value: boolean) => void	-	Callback when the open state changes
dialogClassName	string	-	Additional classes for the dialog container
preventAutoFocus	boolean	true	Whether to prevent auto-focus on open
children	ReactNode	-	The content to display in the dialog

NavigableDialogNav

Prop	Type	Default	Description
items	`{ id: string; label: ReactNode; icon?: FC }[]`	-	Navigation items configuration
className	string	-	Additional classes for the navigation
onNavigate	(fromId: string) => boolean \| `Promise<boolean>`	-	Optional navigation validation
initialSelectedId	string	-	Initial active section ID
disabledIds	string[]	-	IDs of disabled navigation items

NavigableDialogContent

Prop	Type	Default	Description
items	`{ id: string; content: ReactNode }[]`	-	Content items for each section
className	string	-	Additional classes for content area

NavigableDialogHeader

Prop	Type	Default	Description
title	string	-	The title of the dialog
subTitle	string	-	Optional subtitle for the dialog

Structure

The NavigableDialog is composed of several components that work together:

NavigableDialogRoot - The container component that manages dialog state
NavigableDialogHeader - Contains the title and optional subtitle
NavigableDialogBody - Wrapper for navigation and content
NavigableDialogNav - Sidebar navigation with icons and labels
NavigableDialogContent - The main content area that displays the active section
NavigableDialogFooter - Optional section for actions like buttons

Styling

The component includes default styling with:

Responsive layout with side navigation
Smooth transitions between sections
Icon support in navigation items
Dark mode support
Customizable through className props

Accessibility

The NavigableDialog implements the following accessibility features:

Full keyboard navigation support
ARIA labels for navigation items
Focus management between sections
Screen reader announcements for section changes
All the accessibility features from the base Dialog component

NavigableDialog

On this page