Skip to Content
Logo of RG Logo of RG
  • Home
  • Shop
  • Events
  • Courses
  • Company
    • News
    • Success Stories
  • Odoo Docs 19
  • Appointment
  • Jobs
  • Contact us
  • 0
  • 0
  • +1 555-555-5556
  • Sign in
Logo of RG Logo of RG
  • 0
  • 0
    • Home
    • Shop
    • Events
    • Courses
    • Company
      • News
      • Success Stories
    • Odoo Docs 19
    • Appointment
    • Jobs
    • Contact us
  • +1 555-555-5556
  • Sign in
Odoo Docs 19
Home Components Guides Classes Search
418 components
Overlay
  • Accordion Item
  • Barcode Dialog
  • Bottom Sheet
  • Calendar Common Popover
  • Calendar Year Popover
  • Confirmation Dialog
  • Date Time Picker Popover
  • dialog
  • Domain Selector Dialog
  • Dropdown
  • Dropdown Group
  • Dropdown Item
  • Dropdown Popover
  • Error504 Dialog
  • Error Dialog
  • Export Data Dialog
  • Expression Editor Dialog
  • Form Error Dialog
  • Form View Dialog
  • Kanban Column Examples Dialog
  • Kanban Cover Image Dialog
  • Kanban Dropdown Menu Wrapper
  • List Confirmation Dialog
  • Model Field Selector Popover
  • Multi Create Popover
  • Multi Currency Popover
  • popover
  • Redirect Warning Dialog
  • Res User Group Ids Popover
  • Scss Error Display
  • Select Create
  • Select Create Dialog
  • Session Expired Dialog
  • Signature Dialog
  • Warning Dialog
  1. Components
  2. Dropdown Item
OWL overlay

Dropdown Item

Odoo 19 OWL component — Dropdown Item (core)

Live preview Interactive
Source excerpt web/static/src/core/dropdown/dropdown_item.js
import { Component } from "@odoo/owl";
import { useDropdownCloser } from "@web/core/dropdown/dropdown_hooks";

const ClosingMode = {
    None: "none",
    ClosestParent: "closest",
    AllParents: "all",
};

export class DropdownItem extends Component {
    static template = "web.DropdownItem";
    static props = {
        tag: {
            type: String,
            optional: true,
        },
        class: {
            type: [String, Object],
            optional: true,
        },
        onSelected: {
            type: Function,
            optional: true,
        },
        closingMode: {
            type: ClosingMode,
            optional: true,
        },
        attrs: {
            type: Object,
            optional: true,
        },
        slots: { Object, optional: true },
    };
    static defaultProps = {
        closingMode: ClosingMode.AllParents,
        attrs: {},
    };

    setup() {
        this.dropdownControl = useDropdownCloser();
    }

    onClick(ev) {
        if (this.props.attrs && this.props.attrs.href) {
            ev.preventDefault();
        }
        this.props.onSelected?.(ev);
        switch (this.props.closingMode) {
            case ClosingMode.ClosestParent:
                this.dropdownControl.close();
                break;
            case ClosingMode.AllParents:
                this.dropdownControl.closeAll();
                break;
        }
    }
}
Registry / API
Registry name
DropdownItem
Category
—
Module
web
Slug
dropdown-item
Nav group
overlay
Follow us

250 Executive Park Blvd, Suite 3400
San Francisco CA 94134

  • +1 555-555-5556
  • info@yourcompany.example.com
Copyright © Company name
Powered by Odoo - The #1 Open Source eCommerce