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 & 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 & 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>