Dialog with Menu

Showing a nested dropdown Menu component inside a modal Dialog using React.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import { useState } from "react";
import * as Ariakit from "@ariakit/react";
export default function Example() {
const [open, setOpen] = useState(false);
return (
<Ariakit.Button onClick={() => setOpen(true)} className="button">
View recipe
onClose={() => setOpen(false)}
backdrop={<div className="backdrop" />}
<Ariakit.DialogHeading className="heading">
Homemade Cake
Begin by mixing sugar and butter together. Whisk well until light and
fluffy with a manual whisker or a fork. Once done, add the beaten eggs
and blend well. Beat further so that the mixture turns white and
<Ariakit.MenuButton className="button">Share</Ariakit.MenuButton>
<Ariakit.Menu portal className="menu">
<Ariakit.MenuItem className="menu-item">Twitter</Ariakit.MenuItem>
<Ariakit.MenuItem className="menu-item">Facebook</Ariakit.MenuItem>
<Ariakit.MenuItem className="menu-item">Email</Ariakit.MenuItem>


Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.