Specifies a trigger element that toggles the associated Sidebar.
Renders content that opens and closes a sidebar when activated.
import { useState } from "react";
import { Sidebar, SidebarLayout, SidebarMain, SidebarTrigger } from "@syncfusion/react-navigations";
import { MenuIcon } from "@syncfusion/react-icons";
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">
<MenuIcon />
</SidebarTrigger>
<div>Dashboard Content</div>
</SidebarMain>
</SidebarLayout>
);
}
The following table outlines the props for the SidebarTriggerProps:
| Name | Type | Default | Description |
|---|
| children | node | - | Specifies the trigger content (typically an icon). |
| target | string | - | Specifies the target sidebar id. |