# Vue Menu Component > Contextual overlays for lists, links and actions: one panel component with submenus, responsive placement and viewport-aware flipping. ## Example _Added in 6.0.0._ The Vue Menu component is the contextual overlay the library builds its menus on. [Dropdown](https://coreui.io/vue/docs/components/dropdown/) is a compatibility surface over it, so new work belongs here. ```html ``` ### Split button Put the toggle beside a plain button in a [button group](https://coreui.io/vue/docs/components/button-group/) to build a split menu; only the toggle opens the panel. Give the toggle `split`, which narrows its padding so the pair reads as one control. ```html ``` ### Dark menus Pass `dark` to render the panel in the dark theme, matching a dark navbar or a custom style. ```html ``` ### Translucent menus Blur and saturate the background of menus to create a translucent effect with the `translucent` class on ``. ```html ``` ## Placement The `placement` property takes any Floating UI placement — `bottom-start` by default. The panel flips when the viewport runs out, and the `-start`/`-end` half of a placement is logical, so `bottom-start` opens from the right edge in a right-to-left context. ```html ``` ### Responsive Breakpoint prefixes make a placement responsive: `bottom-start md:top-end` reads as bottom-start below `md` and top-end from `md` up. The breakpoints are the Sass ones — `sm` 576px, `md` 768px, `lg` 1024px, `xl` 1280px, `2xl` 1536px. ```html ``` ## Offset The `offset` property moves the panel away from its toggle, as `[skidding, distance]` in pixels — skidding along the toggle, distance away from it. It defaults to `[0, 2]`. ```html ``` ## Teleport The panel renders where it sits in the markup, so an ancestor with `overflow: hidden`, a `transform` or its own stacking context clips it — the left menu below is inside a box 80px tall. Pass `portal` to render the panel through a [Teleport](https://vuejs.org/guide/built-ins/teleport.html) into `body` instead, and it escapes. ```html ``` `container` sends the panel somewhere other than the body — a CSS selector, an element, or a function returning one. Anything but `body` implies `portal`. ```vue ``` ## Menu items `` renders an `` when it has an `href` and a `