Ariakit
/

Sliding Menu

Rendering nested Menu components to create submenus that slide in and out using CSS Scroll Snap.

import { Menu, MenuGroup, MenuItem, MenuSeparator } from "./menu.tsx";
import "./style.css";
export default function Example() {
return (
<Menu label="Options">
<MenuItem label="New Tab" />
<MenuItem label="New Window" />
<Menu label="Bookmarks">
<MenuItem label="Bookmark current tab" />
<MenuItem label="Search bookmarks" />
<MenuItem label="Show bookmarks toolbar" />
<MenuGroup label="Recent bookmarks">
<MenuItem label="Getting Started" />
<MenuItem label="Get Involved" />
<MenuItem label="Get Help" />
<MenuItem label="About Us" />
</Menu>
<Menu label="History">
<Menu label="Recently closed tabs">
<MenuItem label="Getting Started" />
<MenuItem label="Get Involved" />
<MenuItem label="Get Help" />
<MenuItem label="About Us" />
</Menu>
<Menu label="Recently closed windows">
<MenuItem label="Getting Started" />
<MenuItem label="Get Involved" />
<MenuItem label="Get Help" />
<MenuItem label="About Us" />
</Menu>
<MenuItem label="Restore previous session" />
<MenuGroup label="Recent history">
<MenuItem label="Getting Started" />
<MenuItem label="Get Involved" />
<MenuItem label="Get Help" />
<MenuItem label="About Us" />
</Menu>
<MenuItem label="Downloads" />
<MenuItem label="Passwords" />
<Menu label="More tools">
<MenuItem label="Customize toolbar..." />
<MenuGroup label="Browser tools">
<MenuItem label="Web Developer Tools" />
<MenuItem label="Task Manager" />
<MenuItem label="Remote Debugging" />
<MenuItem label="Browser Console" />
<MenuItem label="Responsive Design Mode" />
<MenuItem label="Eyedropper" />
<MenuItem label="Page Source" />
<MenuItem label="Extensions for developers" />
</Menu>
<Menu label="Help">
<MenuItem label="Get help" />
<MenuItem label="Share ideas and feedback..." />
<MenuItem label="Troubleshoot Mode..." />
<MenuItem label="More troubleshooting information" />
<MenuItem label="Report deceptive site..." />
</Menu>
</Menu>
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue