Vertical separator groups related menu items.

<script setup lang="ts">
import { Separator } from "@/components/ui/separator"
</script>

<template>
  <div class="flex items-center justify-center">
    <div class="flex items-center gap-4 text-sm">
      <div class="flex flex-col gap-1">
        <span class="font-medium">Settings</span>
        <span class="text-muted-foreground text-xs">
          Manage preferences
        </span>
      </div>
      <Separator orientation="vertical" class="h-8 [&]:self-auto!" />
      <div class="flex flex-col gap-1">
        <span class="font-medium">Account</span>
        <span class="text-muted-foreground text-xs">
          Profile & security
        </span>
      </div>
      <Separator orientation="vertical" class="h-8 [&]:self-auto!" />
      <div class="flex flex-col gap-1">
        <span class="font-medium">Help</span>
        <span class="text-muted-foreground text-xs">Support & docs</span>
      </div>
    </div>
  </div>
</template>