CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contextual menu - Design System - Ubuntu Community Hub</title> <meta name="description" content="Overview A contextual menu is a floating menu. It can be applied to any button, link or navigation item that requires a secondary menu. Anatomy The contextual menu is made of these different parts: Trigger (button&hellip;"> <meta name="generator" content="Discourse 3.3.0 - https://github.com/discourse/discourse version 5bbdc8a813caf55ab3147ac65b5ffafb5e0aab90"> <link rel="icon" type="image/png" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/3X/b/e/be7e4cc6ef7ce95e285337634be009b70561d719_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/3X/f/3/f38b9c7e7decc51bc26320541c441bfa28f99298_2_180x180.png"> <meta name="theme-color" media="all" content="#ffffff"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discourse.ubuntu.com/t/contextual-menu/29443" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discourse.ubuntu.com/opensearch.xml" title="Ubuntu Community Hub Search"> <link href="/stylesheets/color_definitions_base__2_df74468083942b54f113bf203828e942e534e4d1.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" class="light-scheme"/> <link href="/stylesheets/desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop" /> <link href="/stylesheets/checklist_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="checklist" /> <link href="/stylesheets/discourse-calendar_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-calendar" /> <link href="/stylesheets/discourse-data-explorer_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-data-explorer" /> <link href="/stylesheets/discourse-details_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="/stylesheets/discourse-gamification_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-gamification" /> <link href="/stylesheets/discourse-lazy-videos_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="/stylesheets/discourse-local-dates_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="/stylesheets/discourse-narrative-bot_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="/stylesheets/discourse-presence_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="/stylesheets/discourse-rad-plugin_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-rad-plugin" /> <link href="/stylesheets/discourse-solved_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="/stylesheets/discourse-templates_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-templates" /> <link href="/stylesheets/markdown-note_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="markdown-note" /> <link href="/stylesheets/poll_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="poll" /> <link href="/stylesheets/spoiler-alert_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="/stylesheets/discourse-calendar_desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-calendar_desktop" /> <link href="/stylesheets/discourse-gamification_desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-gamification_desktop" /> <link href="/stylesheets/poll_desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="/stylesheets/desktop_theme_13_cadacaca089968feaf85c1112034a85b61733571.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="13" data-theme-name="md-composer-extras"/> <link href="/stylesheets/desktop_theme_10_d5bea094e79bb071f148ac7a6ea3cb8d1021508b.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="10" data-theme-name="ubuntu discourse"/> <link href="/stylesheets/desktop_theme_2_60b21d2c77ece1ab26a5e1d4ab37af1304c3ff26.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="default"/> <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,300,400" rel="stylesheet"> <style> body { font-family: 'Ubuntu', sans-serif; font-weight: 400; } h1 { font-weight: 100; } </style> <meta name="google-site-verification" content="grFP-bTinUn8jXfEmhZCV8ccDV1IJG2wexOuguu7z_M"> <script defer="" src="/theme-javascripts/f7a737190fe36b9aee0dd740a1ddde023af282d4.js?__ws=discourse.ubuntu.com" data-theme-id="2" nonce="PpoVMOr3B8za23hvFBZO7RG8L"></script> <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,400,700" rel="stylesheet" type="text/css"> <script defer="" src="/theme-javascripts/1d29d1e3d25a498707fc181a041c9152fb489073.js?__ws=discourse.ubuntu.com" data-theme-id="13" nonce="PpoVMOr3B8za23hvFBZO7RG8L"></script> <script defer="" src="/theme-javascripts/5fd6ab93349b47da044725d430da846ba195a894.js?__ws=discourse.ubuntu.com" data-theme-id="15" nonce="PpoVMOr3B8za23hvFBZO7RG8L"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Contextual menu'" href="https://discourse.ubuntu.com/t/contextual-menu/29443.rss" /> <meta property="og:site_name" content="Ubuntu Community Hub" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="og:image" content="https://ubuntucommunity.s3.us-east-2.amazonaws.com/original/3X/9/0/905b15b7d477513b2af0668c333736b100eef109.svg" /> <meta property="og:url" content="https://discourse.ubuntu.com/t/contextual-menu/29443" /> <meta name="twitter:url" content="https://discourse.ubuntu.com/t/contextual-menu/29443" /> <meta property="og:title" content="Contextual menu" /> <meta name="twitter:title" content="Contextual menu" /> <meta property="og:description" content="Overview A contextual menu is a floating menu. It can be applied to any button, link or navigation item that requires a secondary menu. Anatomy The contextual menu is made of these different parts: Trigger (button, link or navigation item). Main element that requires a contextual menu. Menu floating box Divider (optional) Title for item’s group (optional) Selectionable menu item Usage When to use Use a contextual menu when there is a need for a secondary menu item that provides shortc..." /> <meta name="twitter:description" content="Overview A contextual menu is a floating menu. It can be applied to any button, link or navigation item that requires a secondary menu. Anatomy The contextual menu is made of these different parts: Trigger (button, link or navigation item). Main element that requires a contextual menu. Menu floating box Divider (optional) Title for item’s group (optional) Selectionable menu item Usage When to use Use a contextual menu when there is a need for a secondary menu item that provides shortc..." /> <meta property="og:article:section" content="Design System" /> <meta property="og:article:section:color" content="0088CC" /> <meta property="og:article:tag" content="component" /> <meta property="og:article:tag" content="design-guidelines" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="1 ❤" /> <meta property="article:published_time" content="2023-12-11T07:20:34+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Contextual menu","mainEntity":{"@type":"Question","name":"Contextual menu","text":"<a name=\"overview-1\" class=\"anchor\" href=\"#overview-1\"><\/a>Overview\n\nA contextual menu is a floating menu. It can be applied to any button, link or navigation item that requires a secondary menu.\n\n<a name=\"anatomy-2\" class=\"anchor\" href=\"#anatomy-2\"><\/a>Anatomy\n\nThe contextual menu is made of these different parts:\n\n[image]\n\nTrigger (button, link or navigation item). Main element that requires a contextual menu.\n\n…","upvoteCount":1,"answerCount":0,"datePublished":"2022-07-11T13:28:17.122Z","author":{"@type":"Person","name":"anne-sophie1104","url":"https://discourse.ubuntu.com/u/anne-sophie1104"}}}</script> </head> <body class="crawler browser-update"> <nav class="p-navigation--secondary"> <div class="u-fixed-width"> <a class="p-navigation--secondary__banner" href="/"> <h5 class="p-navigation--secondary__logo"> Discourse </h5> </a> </div> </nav> <header> <a href="/"> Ubuntu Community Hub </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/contextual-menu/29443">Contextual menu</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/design-system/98" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Design System</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> <div class="topic-category"> <div class='discourse-tags list-tags'> <a href='https://discourse.ubuntu.com/tag/component' class='discourse-tag' rel="tag">component</a>, <a href='https://discourse.ubuntu.com/tag/design-guidelines' class='discourse-tag' rel="tag">design-guidelines</a> </div> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Contextual menu'> <link itemprop='url' href='https://discourse.ubuntu.com/t/contextual-menu/29443'> <meta itemprop='datePublished' content='2022-07-11T13:28:17Z'> <meta itemprop='articleSection' content='Design System'> <meta itemprop='keywords' content='component, design-guidelines'> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Canonical Inc.'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://ubuntucommunity.s3.us-east-2.amazonaws.com/original/3X/d/1/d1318a905da7b730a81d0b3f393762cb7d478e38.svg'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.ubuntu.com/u/anne-sophie1104'><span itemprop='name'>anne-sophie1104</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discourse.ubuntu.com/t/contextual-menu/29443"> <span class="crawler-post-infos"> <time datetime='2022-07-11T13:28:17Z' class='post-time'> July 11, 2022, 1:28pm </time> <meta itemprop='dateModified' content='2023-12-11T07:20:34Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <h2> <a name="overview-1" class="anchor" href="#overview-1"></a>Overview</h2> <p>A contextual menu is a floating menu. It can be applied to any button, link or navigation item that requires a secondary menu.</p> <h2> <a name="anatomy-2" class="anchor" href="#anatomy-2"></a>Anatomy</h2> <p>The contextual menu is made of these different parts:</p> <p><img src="https://lh6.googleusercontent.com/kSZ1AuJcLW9bWVBmCvBSSRlrTNOdYNxRfBgwA-dgKTxH-lJqI1yNkEZwazSv4yUSkKPm3KK-MPk83YOlF4ksBGk-7sjDvfL5B72kFDj7g5YHEVrS7TN3AD0fPhvoiRu15FFURHmdFA7dNhCwkQ" alt="" width="357" height="296"></p> <ol> <li>Trigger (button, link or navigation item). Main element that requires a contextual menu.</li> <li>Menu floating box</li> <li>Divider (optional)</li> <li>Title for item’s group (optional)</li> <li>Selectionable menu item</li> </ol> <h2> <a name="usage-3" class="anchor" href="#usage-3"></a>Usage</h2> <h3> <a name="when-to-use-4" class="anchor" href="#when-to-use-4"></a>When to use</h3> <ul> <li>Use a contextual menu when there is a need for a secondary menu item that provides shortcuts for actions the user might want to take, without cluttering the interface.</li> <li>Aim for a small number of menu items</li> <li>Aim to place the most frequently used menu items where people are likely to focus first.<br> Make the order of items relevant</li> <li>Follow best practices for using separators. As with other types of menus, you can use separators to group items in a context menu and help people scan the menu more quickly. You can also optionally use titles to group items together.</li> </ul> <h3> <a name="when-not-to-use-5" class="anchor" href="#when-not-to-use-5"></a>When not to use</h3> <ul> <li>To provide advanced or rarely used items. Instead, it helps people quickly access the commands they are most likely to need in their current context</li> <li>In general, don’t use more than about three groups in a contextual menu</li> </ul> <h2> <a name="behaviour-6" class="anchor" href="#behaviour-6"></a>Behaviour</h2> <h3> <a name="open-7" class="anchor" href="#open-7"></a>Open</h3> <p>Selecting (clicking) the main element that requires a secondary menu (button, link or navigation item) will open the contextual menu. It can be open by default.</p> <h3> <a name="alignment-8" class="anchor" href="#alignment-8"></a>Alignment</h3> <p>Using direction modifiers will change the placement of the drop-down menu. By default alignment is to the right of the parent pattern. It can be left or right aligned.</p> <h3> <a name="hover-9" class="anchor" href="#hover-9"></a>Hover</h3> <p>When you hover a selectable item in the contextual menu, it will have a hover state with grey colour.</p> <p>Example in <a href="http://Charmhub.io">Charmhub.io</a>:</p> <p><img src="https://lh6.googleusercontent.com/GTm1EyJPATQ4_kANlwibjIT7uA2ORqb3gfT60NnKCpLVBKvw7X8aP5DEZgjgm5L_JSvlllST8u8TmMyxhjjedGCcs7EhcFMP5yCO39WCSggA2a-sXHcT0Ec6J9Qw1f8pCTTIz22D2B-skz9Ga6M" alt="" width="194" height="130"></p> <h3> <a name="click-10" class="anchor" href="#click-10"></a>Click</h3> <p>When clicking on a selectable item in the contextual menu it performs the action.</p> <h2> <a name="examples-11" class="anchor" href="#examples-11"></a>Examples</h2> <h3> <a name="in-charmhub-12" class="anchor" href="#in-charmhub-12"></a>In Charmhub</h3> <p><img src="https://lh6.googleusercontent.com/Ia44kIP4IQ7htWsA-5YfMDSCBKKAhfemaVAKZ6dylg17qenI_YRka_LGDfzW2Wu8D1GjvF6sKvxtq_62uKwKZQ48IXZVasiO-tBKqbJ8-9dXW-h0-IpQlgUHp9wjgkppzMneTtqDocCq1iSeEmM" alt="" width="243" height="328"></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://discourse.ubuntu.com/t/design-system-website-config/27037">Design system website (config)</a> <meta itemprop='position' content='2'> </div> </div> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://www.ubuntu.com/legal' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://www.ubuntu.com/legal/terms-and-policies/privacy-policy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>