Skip to main content

LgMenuSeparator

LgMenuSeparator inserts a separation line in the menu to visually isolate groups of actions. The component renders only the separator; use LgMenuTitle if you need a visible label.

<LgMenuSeparator />
  • Namespace : Lagoon.UI.Components
  • Inherits from : LgCustomMenuItem → LgAriaComponentBase → LgComponentBase
  • NuGet Package : Lagoon.UI
Clarify groups

Add a separator before a group of less frequent actions, such as help, administration, or logout.

Usage​

Separate two groups in the sidebar​

Use LgMenuSeparator between two groups of actions. The Text parameter exists, but the current component rendering does not display it.

MenuConfiguration.razor
<LgMenuConfiguration>
    <Sidebar>
        <LgMenuItem Text="#Dashboard" IconName="@IconNames.Home" Uri="dashboard" />
        <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3" Uri="orders" />

        <LgMenuSeparator />

        <LgMenuItem Text="#Documentation" IconName="@IconNames.Question" Uri="help/documentation" />
        <LgMenuItem Text="#ContactSupport" IconName="@IconNames.All.Envelope" Uri="help/contact" />
    </Sidebar>
</LgMenuConfiguration>

Separate in a reusable group​

The separator can be declared in a LgMenuSet to maintain the same structure wherever the group is included.

MenuConfiguration.razor
<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="account-menu">
            <LgMenuItem Text="#Profile" IconName="@IconNames.All.PersonCircle" Uri="account/profile" />
            <LgMenuItem Text="#Preferences" IconName="@IconNames.Admin" Uri="account/preferences" />
            <LgMenuSeparator />
            <LgMenuItem Text="#Logout" IconName="@IconNames.Logout" Uri="logout" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        <LgIncludeMenuSet Id="account-menu" />
    </Menu>
</LgMenuConfiguration>

Add a separator before a single item​

If you only need to isolate an entry, LgMenuItem also exposes HasSeparator. Keep LgMenuSeparator for structural or titled separations.

MenuConfiguration.razor
<LgMenuConfiguration>
    <Toolbar>
        <LgMenuItem Text="#Settings" IconName="@IconNames.Admin" Uri="settings" />
        <LgMenuItem Text="#Help" IconName="@IconNames.Question" Uri="help" HasSeparator="true" />
    </Toolbar>
</LgMenuConfiguration>

Properties​

NameTypeDefaultDeclared inDescription
TextstringnullLgMenuSeparatorExisting parameter, not rendered by the current separator markup.
AriaLabelstringnullLgAriaComponentBaseValue of the aria-label attribute.
AriaLabelledBystringnullLgAriaComponentBaseValue of the aria-labelledby attribute.

Accessibility​

  • Do not use the separator as the sole means of understanding; the group should remain coherent by its labels.
  • To display a group label, use LgMenuTitle with a # key instead.