Use a Dropdown that wraps Reka UI's dropdown components. It's composed compositionally with CDropdown with CDropdownItems wrapped inside the #items slot. The default slot is the trigger.
You can customise the placement of the dropdown using the placement prop.
The CDropdownItem can be customised in a variety of ways as seen below, featuring a prepended and appended icon using the #icon and #appendIcon slots, a destructive prop, as well a disabled prop.
You can also utilise the as prop to choose what the parent element is rendered as. This is useful for rendering links and anchor tags. It'll render an anchor tag by default.
The CDropdown float prop accepts the props for the DropdownMenuContent component from reka-ui. This allows you to control the positioning of the dropdown menu.
Used to force mounting when more control is needed. Useful when
controlling animation with Vue animation libraries.
side?: "top" | "left" | "bottom" | "right"
The preferred side of the trigger to render against when open.
Will be reversed when collisions occur and avoidCollisions
is enabled. Defaults to "top".
sideOffset?: number
The distance in pixels from the trigger. Defaults to 0.
sideFlip?: boolean
Flip to the opposite side when colliding with boundary. Defaults to true.
align?: "end" | "center" | "start"
The preferred alignment against the trigger.
May change when collisions occur. Defaults to "center".
alignOffset?: number
An offset in pixels from the start or end alignment options. Defaults to 0.
alignFlip?: boolean
Flip alignment when colliding with boundary.
May only occur when prioritizePosition is true. Defaults to true.
avoidCollisions?: boolean
When true, overrides the side and align preferences
to prevent collisions with boundary edges. Defaults to true.
collisionBoundary?: Element | (Element | null)[] | null
The element used as the collision boundary. By default
this is the viewport, though you can provide additional
element(s) to be included in this check. Defaults to [].
The distance in pixels from the boundary edges where collision
detection should occur. Accepts a number (same for all sides),
or a partial padding object, for example: { top: 20, left: 20 }. Defaults to 0.
arrowPadding?: number
The padding between the arrow and the edges of the content.
If your content has border-radius, this will prevent it from
overflowing the corners. Defaults to 0.
sticky?: "partial" | "always"
The sticky behavior on the align axis. partial will keep the
content in the boundary as long as the trigger is at least partially
in the boundary whilst "always" will keep the content in the boundary
regardless. Defaults to "partial".
hideWhenDetached?: boolean
Whether to hide the content when the trigger becomes fully occluded. Defaults to false.
positionStrategy?: "absolute" | "fixed"
The type of CSS position property to use.
updatePositionStrategy?: "always" | "optimized"
Strategy to update the position of the floating element on every animation frame. Defaults to 'optimized'.
disableUpdateOnLayoutShift?: boolean
Whether to disable the update position for the content when the layout shifted. Defaults to false.
prioritizePosition?: boolean
Force content to be position within the viewport.Might overlap the reference element, which may not be desired. Defaults to false.
reference?: ReferenceElement
The custom element or virtual element that will be set as the reference
to position the floating element.If provided, it will replace the default anchor element.
asChild?: boolean
Change the default rendered element for the one passed as a child, merging their props and behavior.Read our Composition guide for more details.
as?: AsTag | Component
The element or component this component should render as. Can be overwritten by asChild. Defaults to "div".
loop?: boolean
When true, keyboard navigation will loop from last item to first, and vice versa. Defaults to false.
Guard called when the router is navigating to the route that is rendering
this component from a different route. Differently from beforeRouteUpdate
and beforeRouteLeave, beforeRouteEnter does not have access to the
component instance through this because it triggers before the component
is even mounted.
beforeRouteUpdate?: NavigationGuard
Guard called whenever the route that renders this component has changed, but
it is reused for the new route. This allows you to guard for changes in
params, the query or the hash.
beforeRouteLeave?: NavigationGuard
Guard called when the router is navigating away from the current route that
is rendering this component.
head?: ((nuxtApp: NuxtApp) => U<Deprecated>)
Available exclusively for defineNuxtComponent.
It will not be executed when using defineComponent.
destructive
boolean
icon
string
appendIcon
string
disabled
boolean
When true, prevents the user from interacting with the item.
textValue
string
Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item.
Use this when the content is complex, or you have non-textual content inside.
asChild
boolean
Change the default rendered element for the one passed as a child, merging their props and behavior.Read our Composition guide for more details.