Specifies the layout structure for sidebar navigation and main content.
Provides the root container that coordinates the interaction between
Sidebar, SidebarMain, and SidebarTrigger.
import { useState } from "react";
import { Sidebar, SidebarLayout, SidebarMain, SidebarTrigger } from "@syncfusion/react-navigations";
export default function App() {
const [open, setOpen] = useState(false);
return (
<SidebarLayout>
<Sidebar
open={open}
onOpenChange={(e) => setOpen(e.open)}
>
<nav>
<ul>
<li>Dashboard</li>
<li>Projects</li>
<li>Settings</li>
</ul>
</nav>
</Sidebar>
<SidebarMain>
<SidebarTrigger aria-label="Toggle navigation">
☰
</SidebarTrigger>
<div>
Dashboard Content
</div>
</SidebarMain>
</SidebarLayout>
);
}
The following table outlines the props for the SidebarLayoutProps:
| Name | Type | Default | Description |
|---|
| children | node | - | Specifies the content of the layout shell. Typically contains a
<Sidebar>, a <SidebarMain>, and one or more <SidebarTrigger>s. |