168 lines
4.2 KiB
Markdown
168 lines
4.2 KiB
Markdown
# 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
|
|
|
|
```razor
|
|
<SbNavItem Href="/dashboard" Text="Dashboard" />
|
|
```
|
|
|
|
### With Icon
|
|
|
|
```razor
|
|
<SbNavItem Href="/users" Text="Users">
|
|
<Icon>
|
|
<SbIcon Name="users" Size="SbSize.Sm" />
|
|
</Icon>
|
|
</SbNavItem>
|
|
```
|
|
|
|
### With Badge
|
|
|
|
```razor
|
|
<SbNavItem Href="/inbox" Text="Inbox">
|
|
<Icon><SbIcon Name="inbox" /></Icon>
|
|
<Badge><SbBadge Value="5" Color="SbColor.Primary" /></Badge>
|
|
</SbNavItem>
|
|
```
|
|
|
|
### Exact URL Match
|
|
|
|
```razor
|
|
@* 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
|
|
|
|
```razor
|
|
<SbNavItem Href="/premium" Text="Premium Features" Disabled="@(!isPremiumUser)">
|
|
<Icon><SbIcon Name="star" /></Icon>
|
|
</SbNavItem>
|
|
|
|
@code {
|
|
private bool isPremiumUser = false;
|
|
}
|
|
```
|
|
|
|
### Navigation Menu Example
|
|
|
|
```razor
|
|
<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)
|
|
|
|
```razor
|
|
<SbNavItem Href="/home">
|
|
<Icon>
|
|
<SbTooltip Text="Home" Placement="right">
|
|
<SbIcon Name="home" />
|
|
</SbTooltip>
|
|
</Icon>
|
|
</SbNavItem>
|
|
```
|
|
|
|
### With Custom Styling
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
@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 }
|
|
};
|
|
}
|
|
```
|