Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Settings

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.

Framework
UI library

People want a say in how and when they're pinged. This dropdown menu opens from a Notifications button and holds two groups of checkbox rows: Email, Push and SMS under Notification Channels, and Comments, Mentions and Product Updates under Notify Me About. It fits app headers and quick settings panels.

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

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.

All 30 dropdown menu examples