Skip to content

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

Free

Notification Settings Dropdown Menu for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not save the checks or send a notification.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button variant="outline">
      <BellIcon aria-hidden="true" data-icon="inline-start" />Notifications
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Notification Channels</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem
        :checked="emailNotifications"
        @checked-change="setEmailNotifications"
        value="email-notifications"
      >
        Email Notifications
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        :checked="pushNotifications"
        @checked-change="setPushNotifications"
        value="push-notifications"
      >
        Push Notifications
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        :checked="smsNotifications"
        @checked-change="setSmsNotifications"
        value="sms-notifications"
      >
        SMS Notifications
      </DropdownMenuCheckboxItem>
<!-- 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, a value, and @checked-change, 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 asChild, checked="emailNotifications", checked-change="setEmailNotifications", value="email-notifications", checked="pushNotifications" and checked-change="setPushNotifications". The rest is on the Dropdown Menu page.

Button

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

All 30 dropdown menu examples