Separator

Command.Separator renders a visual and semantic separator (using role="separator") between items or groups. By default it is only visible when the search query is empty — it hides as soon as the user starts typing, so it doesn’t clutter search results. Pass alwaysRender to keep it visible regardless of the search state.

import { Command } from 'cmdk'

export function CommandMenu() {
  return (
    <Command>
      <Command.Input />
      <Command.List>
        <Command.Item>Calendar</Command.Item>
        <Command.Item>Search</Command.Item>
        <Command.Separator />
        <Command.Item>Settings</Command.Item>
        <Command.Item>Profile</Command.Item>
      </Command.List>
    </Command>
  )
}

Data attribute: [cmdk-separator]

Props

boolean

default:"false"

When true, the separator is rendered even when the user has typed a search query. By default, separators are only rendered when the search input is empty.

All other div props are forwarded to the underlying element.

Behavior

The separator renders when either of these conditions is true:

The search query is empty (default behavior)
alwaysRender is true

When neither condition is met, the component returns null — it is fully removed from the DOM, not just hidden.

Styling

[cmdk-separator] {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

Examples

Default separator (hidden during search)

<Command.List>
  <Command.Item>Copy</Command.Item>
  <Command.Item>Paste</Command.Item>
  <Command.Separator />
  <Command.Item>Delete</Command.Item>
</Command.List>

Always-visible separator

<Command.List>
  <Command.Item>Profile</Command.Item>
  <Command.Separator alwaysRender />
  <Command.Item>Log out</Command.Item>
</Command.List>

Use alwaysRender sparingly. Separators that persist during search can make filtered results look fragmented.

⌘I

Get Started

Components

Guides

Examples

Props

Behavior

Styling

Examples

Default separator (hidden during search)

Always-visible separator

​Props

​Behavior

​Styling

​Examples

​Default separator (hidden during search)

​Always-visible separator

Props

Behavior

Styling

Examples

Default separator (hidden during search)

Always-visible separator