Separator

Visually divides or groups content.

<dui-linkbutton variant="ButtonVariant.Outline" href="#">View bookings</dui-linkbutton>
<dui-separator/>
<dui-linkbutton variant="ButtonVariant.Outline" href="#">View past trips</dui-linkbutton>

Usage

<dui-separator/>

Examples

Horizontal

<div class="flex flex-col gap-4 text-sm">
    <div class="flex flex-col gap-1">
        <div class="leading-none font-medium">DuneUI</div>
        <div class="text-muted-foreground">
            Create beautiful ASP.NET Core apps
        </div>
    </div>
    <dui-separator/>
    <div>
        DuneUI Tag Helpers is a collection of beautifully designed components you can use to create CRUD screens in
        ASP.NET Core MVC and Razor Pages applications.
    </div>
</div>

Vertical

<div class="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <dui-separator orientation="SeparatorOrientation.Vertical"/>
    <div>Docs</div>
    <dui-separator orientation="SeparatorOrientation.Vertical"/>
    <div>Source</div>
</div>

Vertical Menu

<div class="flex items-center gap-2 text-sm md:gap-4">
    <div class="flex flex-col gap-1">
        <span class="font-medium">Settings</span>
        <span class="text-muted-foreground text-xs">
            Manage preferences
        </span>
    </div>
    <dui-separator orientation="SeparatorOrientation.Vertical" />
    <div class="flex flex-col gap-1">
        <span class="font-medium">Account</span>
        <span class="text-muted-foreground text-xs">
            Profile &amp; security
        </span>
    </div>
    <dui-separator orientation="SeparatorOrientation.Vertical" />
    <div class="flex flex-col gap-1">
        <span class="font-medium">Help</span>
        <span class="text-muted-foreground text-xs">Support &amp; docs</span>
    </div>
</div>

In List

<div class="w-[400px] flex flex-col gap-2 text-sm">
    <dl class="flex items-center justify-between">
        <dt>Item 1</dt>
        <dd class="text-muted-foreground">Value 1</dd>
    </dl>
    <dui-separator/>
    <dl class="flex items-center justify-between">
        <dt>Item 2</dt>
        <dd class="text-muted-foreground">Value 2</dd>
    </dl>
    <dui-separator/>
    <dl class="flex items-center justify-between">
        <dt>Item 3</dt>
        <dd class="text-muted-foreground">Value 3</dd>
    </dl>
</div>