188 lines
5.3 KiB
Markdown
188 lines
5.3 KiB
Markdown
# SbNavMenu
|
|
|
|
A navigation menu container component for organizing navigation items.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Collapsed | bool | false | Whether the menu is collapsed |
|
|
| AriaLabel | string | "Navigation" | Accessible label for the navigation |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| CollapsedChanged | EventCallback\<bool\> | Fired when collapsed state changes |
|
|
|
|
## Templates / Slots
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| ChildContent | RenderFragment | Navigation content. Use SbNavItem components, or any markup (e.g. ul/li with links). |
|
|
|
|
## Methods
|
|
|
|
| Method | Return Type | Description |
|
|
|--------|-------------|-------------|
|
|
| ToggleAsync() | Task | Toggle the collapsed state |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-nav-menu` - Base class
|
|
- `sb-nav-menu--collapsed` - When menu is collapsed
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbNavMenu>
|
|
<SbNavItem Href="/" Text="Home">
|
|
<Icon><SbIcon Name="home" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/about" Text="About">
|
|
<Icon><SbIcon Name="info" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/contact" Text="Contact">
|
|
<Icon><SbIcon Name="mail" /></Icon>
|
|
</SbNavItem>
|
|
</SbNavMenu>
|
|
```
|
|
|
|
### Inside a layout sidebar
|
|
|
|
Use `SbNavMenu` inside the Wish theme's sidebar (e.g. `WishSidebar` or `WishExpandPanel`):
|
|
|
|
```razor
|
|
<SbNavMenu>
|
|
<SbNavItem Href="/" Text="Dashboard">
|
|
<Icon><SbIcon Name="layout" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/users" Text="Users">
|
|
<Icon><SbIcon Name="users" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/settings" Text="Settings">
|
|
<Icon><SbIcon Name="settings" /></Icon>
|
|
</SbNavItem>
|
|
</SbNavMenu>
|
|
```
|
|
|
|
### Collapsible Menu
|
|
|
|
```razor
|
|
<SbNavMenu @bind-Collapsed="isCollapsed">
|
|
<SbNavItem Href="/" Text="Home">
|
|
<Icon><SbIcon Name="home" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/projects" Text="Projects">
|
|
<Icon><SbIcon Name="folder" /></Icon>
|
|
</SbNavItem>
|
|
</SbNavMenu>
|
|
|
|
<SbButton OnClick="() => isCollapsed = !isCollapsed">
|
|
Toggle Menu
|
|
</SbButton>
|
|
|
|
@code {
|
|
private bool isCollapsed = false;
|
|
}
|
|
```
|
|
|
|
### With Grouped Sections
|
|
|
|
```razor
|
|
<SbNavMenu AriaLabel="Main Navigation">
|
|
<SbText Size="xs" Color="muted" Class="nav-section-label">Main</SbText>
|
|
<SbNavItem Href="/" Text="Dashboard">
|
|
<Icon><SbIcon Name="layout" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/analytics" Text="Analytics">
|
|
<Icon><SbIcon Name="bar-chart" /></Icon>
|
|
</SbNavItem>
|
|
|
|
<SbSpacer Size="SbSpacerSize.Small" />
|
|
|
|
<SbText Size="xs" Color="muted" Class="nav-section-label">Content</SbText>
|
|
<SbNavItem Href="/posts" Text="Posts">
|
|
<Icon><SbIcon Name="file-text" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/media" Text="Media">
|
|
<Icon><SbIcon Name="image" /></Icon>
|
|
</SbNavItem>
|
|
|
|
<SbSpacer Size="SbSpacerSize.Small" />
|
|
|
|
<SbText Size="xs" Color="muted" Class="nav-section-label">System</SbText>
|
|
<SbNavItem Href="/users" Text="Users">
|
|
<Icon><SbIcon Name="users" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/settings" Text="Settings">
|
|
<Icon><SbIcon Name="settings" /></Icon>
|
|
</SbNavItem>
|
|
</SbNavMenu>
|
|
```
|
|
|
|
### With Badges
|
|
|
|
```razor
|
|
<SbNavMenu>
|
|
<SbNavItem Href="/inbox" Text="Inbox">
|
|
<Icon><SbIcon Name="inbox" /></Icon>
|
|
<Badge><SbBadge Value="5" Color="SbColor.Primary" /></Badge>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/notifications" Text="Notifications">
|
|
<Icon><SbIcon Name="bell" /></Icon>
|
|
<Badge><SbBadge Value="12" Color="SbColor.Danger" /></Badge>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/tasks" Text="Tasks">
|
|
<Icon><SbIcon Name="check-square" /></Icon>
|
|
<Badge><SbBadge Value="3" Color="SbColor.Warning" /></Badge>
|
|
</SbNavItem>
|
|
</SbNavMenu>
|
|
```
|
|
|
|
### Admin Panel Navigation
|
|
|
|
```razor
|
|
<SbNavMenu AriaLabel="Admin Navigation">
|
|
@* Main navigation items *@
|
|
<SbNavItem Href="/admin" Text="Dashboard" Match="NavLinkMatch.All">
|
|
<Icon><SbIcon Name="layout" /></Icon>
|
|
</SbNavItem>
|
|
|
|
@* Content management *@
|
|
<SbAccordion>
|
|
<SbAccordionItem Title="Content">
|
|
<Icon><SbIcon Name="file-text" /></Icon>
|
|
<ChildContent>
|
|
<SbNavItem Href="/admin/posts" Text="Posts" />
|
|
<SbNavItem Href="/admin/pages" Text="Pages" />
|
|
<SbNavItem Href="/admin/media" Text="Media" />
|
|
</ChildContent>
|
|
</SbAccordionItem>
|
|
<SbAccordionItem Title="Users">
|
|
<Icon><SbIcon Name="users" /></Icon>
|
|
<ChildContent>
|
|
<SbNavItem Href="/admin/users" Text="All Users" />
|
|
<SbNavItem Href="/admin/roles" Text="Roles" />
|
|
<SbNavItem Href="/admin/permissions" Text="Permissions" />
|
|
</ChildContent>
|
|
</SbAccordionItem>
|
|
</SbAccordion>
|
|
|
|
<SbSpacer Grow="true" />
|
|
|
|
@* Bottom items *@
|
|
<SbNavItem Href="/admin/settings" Text="Settings">
|
|
<Icon><SbIcon Name="settings" /></Icon>
|
|
</SbNavItem>
|
|
<SbNavItem Href="/admin/help" Text="Help">
|
|
<Icon><SbIcon Name="help-circle" /></Icon>
|
|
</SbNavItem>
|
|
</SbNavMenu>
|
|
```
|