Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Notification Settings Dropdown Menu for React

A notifications menu with two groups of toggles: the channels to use and the events to be notified about.

Notifications opens two checkbox groups: email, push, and SMS, then comments, mentions, and product updates. Any mix can stay on.

Use it when those toggles are flipped often enough to live in the header. Rare settings belong on the page as a Switch. In React, Base UI does not save the checks or send a notification.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    <BellIcon aria-hidden="true" data-icon="inline-start" />
    Notifications
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Notification Channels</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem
        checked={emailNotifications}
        onCheckedChange={setEmailNotifications}
      >
        Email Notifications
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        checked={pushNotifications}
        onCheckedChange={setPushNotifications}
      >
        Push Notifications
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        checked={smsNotifications}
        onCheckedChange={setSmsNotifications}
      >
        SMS Notifications
      </DropdownMenuCheckboxItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Notify Me About</DropdownMenuLabel>
{/* The rest of the file is under Installation. */}

FAQ

Which notification rows start on?

Email Notifications, Push Notifications, Comments and Mentions start checked; SMS Notifications and Product Updates start off. Each DropdownMenuCheckboxItem takes checked and onCheckedChange, which receives a boolean.

How are the two sections built?

Two DropdownMenuGroups with a separator between them. Each starts with its DropdownMenuLabel, Notification Channels or Notify Me About, and holds three checkbox rows. The menu is w-56.

What does the trigger look like?

An outline Button with a bell icon before the word Notifications.

Can Email and Push both stay on?

Yes. Every row is its own toggle, so any mix of channels and events can be on, including none.

Are the labels choices?

No. Notification Channels and Notify Me About name their groups. They can't be focused or toggled.

Can I change these from the keyboard?

Yes. Arrow keys move between the rows, and Enter or Space toggles the highlighted one. Escape closes the menu and returns focus to the button.

API Reference

Dropdown Menu

Sets checked={emailNotifications}, onCheckedChange={setEmailNotifications}, checked={pushNotifications}, onCheckedChange={setPushNotifications}, checked={smsNotifications} and onCheckedChange={setSmsNotifications}. The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples