Ariakit
/

Dialog with Menu

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

import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";
export default function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Ariakit.Button onClick={() => setOpen(true)} className="button">
View recipe
open={open}
onClose={() => setOpen(false)}
backdrop={<div className="backdrop" />}
className="dialog"
>
<Ariakit.DialogHeading className="heading">
Homemade Cake
<p>
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
creamy.
</p>
<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>
</>
);
}

Components

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue