sufi-blazor/docs/components/navigation/SbNavItem.md

SbNavItem

A navigation link item component with active state detection.

Parameters

Parameter	Type	Default	Description
Href	string?	null	Navigation URL
Text	string?	null	Navigation text
Match	NavLinkMatch	Prefix	URL matching behavior (All or Prefix)
Disabled	bool	false	Whether the item is disabled
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Templates / Slots

Slot	Type	Description
Icon	RenderFragment	Icon content displayed before text
Badge	RenderFragment	Badge content displayed after text

CSS Classes

• sb-nav-item - Base class
• sb-nav-item--active - When the current URL matches
• sb-nav-item--disabled - When item is disabled
• sb-nav-item__icon - Icon container
• sb-nav-item__text - Text container
• sb-nav-item__badge - Badge container

URL Matching

• Prefix (default): Item is active if current URL starts with Href
• All: Item is active only if current URL exactly matches Href

Examples

Basic Usage

<SbNavItem Href="/dashboard" Text="Dashboard" />

With Icon

<SbNavItem Href="/users" Text="Users">
    <Icon>
        <SbIcon Name="users" Size="SbSize.Sm" />
    </Icon>
</SbNavItem>

With Badge

<SbNavItem Href="/inbox" Text="Inbox">
    <Icon><SbIcon Name="inbox" /></Icon>
    <Badge><SbBadge Value="5" Color="SbColor.Primary" /></Badge>
</SbNavItem>

Exact URL Match

@* Only active when URL is exactly "/" *@
<SbNavItem Href="/" Text="Home" Match="NavLinkMatch.All">
    <Icon><SbIcon Name="home" /></Icon>
</SbNavItem>

@* Active when URL starts with "/users" (e.g., /users, /users/123) *@
<SbNavItem Href="/users" Text="Users" Match="NavLinkMatch.Prefix">
    <Icon><SbIcon Name="users" /></Icon>
</SbNavItem>

Disabled Item

<SbNavItem Href="/premium" Text="Premium Features" Disabled="@(!isPremiumUser)">
    <Icon><SbIcon Name="star" /></Icon>
</SbNavItem>

@code {
    private bool isPremiumUser = false;
}

Navigation Menu Example

<SbNavMenu>
    <SbNavItem Href="/" Text="Dashboard" Match="NavLinkMatch.All">
        <Icon><SbIcon Name="layout" /></Icon>
    </SbNavItem>
    <SbNavItem Href="/projects" Text="Projects">
        <Icon><SbIcon Name="folder" /></Icon>
        <Badge><SbBadge Value="3" /></Badge>
    </SbNavItem>
    <SbNavItem Href="/team" Text="Team">
        <Icon><SbIcon Name="users" /></Icon>
    </SbNavItem>
    <SbNavItem Href="/reports" Text="Reports">
        <Icon><SbIcon Name="bar-chart" /></Icon>
    </SbNavItem>
    
    <SbSpacer Grow="true" />
    
    <SbNavItem Href="/settings" Text="Settings">
        <Icon><SbIcon Name="settings" /></Icon>
    </SbNavItem>
    <SbNavItem Href="/help" Text="Help & Support">
        <Icon><SbIcon Name="help-circle" /></Icon>
    </SbNavItem>
</SbNavMenu>

Icon-Only (for collapsed sidebar)

<SbNavItem Href="/home">
    <Icon>
        <SbTooltip Text="Home" Placement="right">
            <SbIcon Name="home" />
        </SbTooltip>
    </Icon>
</SbNavItem>

With Custom Styling

<SbNavItem Href="/important" 
           Text="Important" 
           Class="nav-item-highlight"
           Style="font-weight: bold;">
    <Icon><SbIcon Name="alert-circle" Color="SbColor.Warning" /></Icon>
</SbNavItem>

Dynamic Navigation

@foreach (var item in navigationItems)
{
    <SbNavItem Href="@item.Url" 
               Text="@item.Title"
               Disabled="@(!item.HasAccess)">
        <Icon><SbIcon Name="@item.Icon" /></Icon>
        @if (item.BadgeCount > 0)
        {
            <Badge><SbBadge Value="@item.BadgeCount" /></Badge>
        }
    </SbNavItem>
}

@code {
    private List<NavItem> navigationItems = new()
    {
        new() { Url = "/", Title = "Home", Icon = "home", HasAccess = true },
        new() { Url = "/users", Title = "Users", Icon = "users", HasAccess = true, BadgeCount = 5 },
        new() { Url = "/admin", Title = "Admin", Icon = "shield", HasAccess = isAdmin }
    };
}