DashboardLayout

Storybook

Go to Story

DashboardLayoutProps

Defined in: src/molecules/DashboardLayout/DashboardLayout.tsx:19

Extends

• Partial<DashboardContextValue>

Properties

Property	Type	Description	Inherited from	Defined in
shrinkable?	boolean	Enables auto-shrink of dashboard's aside on lg screens. This optimizes real estate. Default true	Partial.shrinkable	src/molecules/DashboardLayout/DashboardContext.tsx:17
title?	ReactNode	Title slot in the header. Can be used together with the PageTitle component. Example <DashboardLayout title={<PageTitle icon={<Home />} title="Home" />} />	-	src/molecules/DashboardLayout/DashboardLayout.tsx:27
actions?	ReactNode	Actions slot displayed in the header and mobile menu.	-	src/molecules/DashboardLayout/DashboardLayout.tsx:31
children?	ReactNode	Main content of the dashboard.	-	src/molecules/DashboardLayout/DashboardLayout.tsx:35
aside?	ReactNode	Slot for aside panel content.	-	src/molecules/DashboardLayout/DashboardLayout.tsx:39
mobile?	ReactNode	Slot for mobile menu content.	-	src/molecules/DashboardLayout/DashboardLayout.tsx:43

---

DashboardLayout()

function DashboardLayout(__namedParameters): Element;

Defined in: src/molecules/DashboardLayout/DashboardLayout.tsx:68

A responsive dashboard skeleton component with a collapsible sidebar.

Features:

• Responsive design with mobile menu
• Collapsible sidebar on large screens
• Fixed header with actions
• Mobile-optimized navigation

Parameters

Parameter	Type
__namedParameters	DashboardLayoutProps

Returns

Element

Example

// Basic usage
<DashboardLayout
  title="Dashboard"
  aside={<Navigation />}
  mobile={<MobileNavigation />}
  actions={<UserMenu />}
>
  <DashboardContent />
</DashboardLayout>

---

MenuItem()

function MenuItem(__namedParameters): Element;

Defined in: src/molecules/DashboardLayout/MenuItem.tsx:63

A navigation menu item component for the dashboard sidebar. Supports responsive behavior with the dashboard's shrinkable state.

Features:

• Active state styling
• Highlight indicator
• Tooltip for collapsed state
• Icon support

Parameters

Parameter	Type
__namedParameters	MenuItemProps

Returns

Element

Example

<MenuItem
  href="/dashboard"
  icon={<Home />}
  label="Dashboard"
  isActive
/>

---

PageTitle()

function PageTitle(__namedParameters): Element;

Defined in: src/molecules/DashboardLayout/PageTitle.tsx:49

A component for displaying page titles with optional icon and subtitle. Used in the DashboardLayoutProps#title|DashboardLayout's title slot to provide consistent title styling.

Parameters

Parameter	Type
__namedParameters	PageTitleProps

Returns

Element

Examples

// Basic usage
<PageTitle
  title="Dashboard"
  icon={<Home />}
/>

// Helps to identify a resource
<PageTitle
  title="Edit user"
  subTitle="example@example.com"
  icon={<User />}
/>

---

UserMenuItem()

function UserMenuItem(__namedParameters): Element;

Defined in: src/molecules/DashboardLayout/UserMenuItem.tsx:41

A component for displaying user information in the dashboard aside. Shows the user's avatar and name, and can be clicked to trigger an action.

Combine it with the DropdownMenu to create an interactive user menu.

Parameters

Parameter	Type
__namedParameters	UserMenuItemProps

Returns

Element

Example

<UserMenuItem
  name="John Doe"
  avatar="/path/to/avatar.jpg"
/>