Skip to main content

    Components

    Qwik M3 Separator

    This component implements the Material Design 3 separator (divider) with proper accessibility support. It provides a visual separator between content sections. Features: - Horizontal and vertical orientations - Decorative or semantic separators - Proper ARIA attributes for accessibility - Consistent Material Design 3 styling

    Interactive Demo

    Horizontal Separator

    Content above

    Content below

    Vertical Separator

    Left content

    Right content

    Menu Example

    List Example

    Account
    ProfilePersonal information
    Chevron Right
    Settings
    SettingsApp preferences
    Chevron Right
    Help
    HelpFAQ and support
    Chevron Right
    
// Horizontal separator (default)
<Separator />

// Vertical separator
<Separator orientation="vertical" />

// Non-decorative separator (semantic)
<Separator decorative={false} aria-label="Content separator" />