Sidenav
Description
A vertical icon-only navigation rail
A Sidenav is a narrow, vertical icon navigation rail intended to be used as the leftmost navigation in an application. Each item shows an icon with a small label below it. The Sidenav can be combined with a Sidebar to its right to create a two-level navigation experience.
The Sidenav (left rail) selects the high-level section, and the Sidebar shows context for that section.
A Sidenav can also be used standalone as the only navigation in a smaller app.
API reference
public sealed class Sidenav : IComponentA vertical icon navigation rail (Sidenav) intended to be used as the leftmost navigation in an application. Each item is rendered as an icon with an optional label below it. Behaves similarly to a Sidebar but is always narrow and icon-centric. Often combined with a Sidebar to its right.
- Namespace
- Tesserae
- Implements
- IComponent
Constructors
| Name | Description |
|---|---|
| Sidenav | Initializes a new instance of the Sidenav class. |
Methods
| Name | Description |
|---|---|
| Secondary | Renders the sidenav using the secondary background color. |
| HideLabels | Hides the labels under the icons. |
| AddHeader | Adds an item to the sidenav header section (top of the rail). |
| AddContent | Adds an item to the sidenav middle content section. |
| RemoveContent | Removes an item from the middle content section. |
| AddFooter | Adds an item to the sidenav footer section (bottom of the rail). |
| Clear | Clears all sections of the sidenav. |
| ClearHeader | Clears the header section. |
| ClearContent | Clears the middle content section. |
| ClearFooter | Clears the footer section. |
| Select | Selects the item with the given identifier (and deselects all the others). |
| Render | Renders the sidenav. |
public Sidenav Secondary()Renders the sidenav using the secondary background color.
public Sidenav HideLabels(bool hide = true)Hides the labels under the icons.
public Sidenav AddHeader(ISidenavItem item)Adds an item to the sidenav header section (top of the rail).
public Sidenav AddContent(ISidenavItem item)Adds an item to the sidenav middle content section.
public Sidenav RemoveContent(ISidenavItem item)Removes an item from the middle content section.
public Sidenav AddFooter(ISidenavItem item)Adds an item to the sidenav footer section (bottom of the rail).
public Sidenav Select(string identifier)Selects the item with the given identifier (and deselects all the others).
public class SidenavButton : ISidenavItemA vertical icon-with-label button intended for use inside a Sidenav. Displays an icon on top with a small text label below it.
- Namespace
- Tesserae
- Implements
- ISidenavItem
Properties
| Name | Description |
|---|---|
| IsSelected | Gets or sets whether the button is currently selected. |
| Identifier | Gets the identifier of the button. |
public bool IsSelected { get ; set ; }Gets or sets whether the button is currently selected.
Methods
| Name | Description |
|---|---|
| Selected | Sets the button as selected. |
| OnClick | Adds a click handler to the button. |
| Tooltip | Sets a custom tooltip text shown on hover. |
| ShowDot | Shows a small dot indicator on the icon (e.g. to mark notifications). |
| DotDanger | Sets a danger color for the dot indicator. |
| AsBrand | Marks this button as the brand/logo at the top of the rail. |
| Render | Renders the button. |
| Show | Shows the button. |
| Collapse | Collapses the button. |
public SidenavButton Selected(bool isSelected = true)Sets the button as selected.
| Overload | |
|---|---|
| OnClick(Action) | Adds a click handler to the button. |
| OnClick(Action<Button, MouseEvent>) | Adds a click handler with the underlying button and mouse event. |
public SidenavButton Tooltip(string text)Sets a custom tooltip text shown on hover.
public SidenavButton ShowDot(bool show = true)Shows a small dot indicator on the icon (e.g. to mark notifications).
public SidenavButton DotDanger()Sets a danger color for the dot indicator.
public SidenavButton AsBrand()Marks this button as the brand/logo at the top of the rail.
Samples
Sidenav + Sidebar
sidenav-sidebar-sample.cs
using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
// The right-side Sidebar shows context for the section selected in the left rail.
var sectionTitle = new SidebarText("title", "Build", textSize: TextSize.Medium, textWeight: TextWeight.SemiBold);
var sidebar = Sidebar();
sidebar.AddHeader(sectionTitle);
// Initial sidebar content (Build section)
FillBuildSection(sidebar);
// The left-side icon-only navigation rail (Sidenav)
var sidenav = Sidenav();
// Brand / logo at the top
sidenav.AddHeader(new SidenavButton("brand", UIcons.Rocket, "App").AsBrand().Tooltip("My App"));
var home = new SidenavButton("home", UIcons.Home, "Home");
var operate = new SidenavButton("operate", UIcons.Pulse, "Operate").ShowDot().DotDanger();
var build = new SidenavButton("build", UIcons.Database, "Build").Selected();
var govern = new SidenavButton("govern", UIcons.Shield, "Govern");
var configure = new SidenavButton("configure", UIcons.Settings, "Configure");
sidenav.AddContent(home);
sidenav.AddContent(operate);
sidenav.AddContent(build);
sidenav.AddContent(govern);
sidenav.AddContent(configure);
home.OnClick(() => SwitchTo(sidenav, sidebar, sectionTitle, "home", "Home", FillHomeSection));
operate.OnClick(() => SwitchTo(sidenav, sidebar, sectionTitle, "operate", "Operate", FillOperateSection));
build.OnClick(() => SwitchTo(sidenav, sidebar, sectionTitle, "build", "Build", FillBuildSection));
govern.OnClick(() => SwitchTo(sidenav, sidebar, sectionTitle, "govern", "Govern", FillGovernSection));
configure.OnClick(() => SwitchTo(sidenav, sidebar, sectionTitle, "configure", "Configure", FillConfigureSection));
// Avatar at the bottom of the rail
sidenav.AddFooter(new SidenavButton("user", UIcons.User, "Account").Tooltip("OA — Account"));
var component = HStack().WS().H(600).Children(
sidenav.HS(),
sidebar.HS(),
VStack().Grow().HS().Padding(16.px()).Children(
Message("Application content goes here")
)
);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
private static void SwitchTo(Sidenav sidenav, Sidebar sidebar, SidebarText title, string identifier, string sectionName, Action<Sidebar> fill)
{
sidenav.Select(identifier);
title.SetText(sectionName);
sidebar.ClearContent();
fill(sidebar);
}
private static void FillHomeSection(Sidebar sidebar)
{
sidebar.AddContent(new SidebarSeparator("home-sep", "Home"));
sidebar.AddContent(new SidebarButton("home-overview", UIcons.Apps, "Overview").Selected());
sidebar.AddContent(new SidebarButton("home-news", UIcons.Bell, "Notifications"));
}
private static void FillOperateSection(Sidebar sidebar)
{
sidebar.AddContent(new SidebarSeparator("op-sep", "Operate"));
sidebar.AddContent(new SidebarButton("op-monitoring", UIcons.Pulse, "Monitoring").Selected());
sidebar.AddContent(new SidebarButton("op-alerts", UIcons.Bell, "Alerts"));
sidebar.AddContent(new SidebarButton("op-logs", UIcons.List, "Logs"));
}
private static void FillBuildSection(Sidebar sidebar)
{
sidebar.AddContent(new SidebarSeparator("build-sep", "Build"));
sidebar.AddContent(new SidebarButton("data-sources", UIcons.Database, "Data Sources").Selected());
sidebar.AddContent(new SidebarButton("graph-db", UIcons.DiagramProject, "Graph DB"));
sidebar.AddContent(new SidebarButton("search-cfg", UIcons.Search, "Search config"));
sidebar.AddContent(new SidebarButton("ai-studio", UIcons.Star, "AI Studio"));
sidebar.AddContent(new SidebarButton("nlp-studio", UIcons.Edit, "NLP Studio"));
sidebar.AddContent(new SidebarButton("endpoints", UIcons.Link, "Endpoints"));
sidebar.AddContent(new SidebarButton("integrations", UIcons.Plug, "Integrations"));
sidebar.AddContent(new SidebarButton("interface", UIcons.Browser, "Interface"));
}
private static void FillGovernSection(Sidebar sidebar)
{
sidebar.AddContent(new SidebarSeparator("gov-sep", "Govern"));
sidebar.AddContent(new SidebarButton("gov-policies", UIcons.Shield, "Policies").Selected());
sidebar.AddContent(new SidebarButton("gov-audit", UIcons.Search, "Audit log"));
}
private static void FillConfigureSection(Sidebar sidebar)
{
sidebar.AddContent(new SidebarSeparator("cfg-sep", "Configure"));
sidebar.AddContent(new SidebarButton("cfg-general", UIcons.Settings, "General").Selected());
sidebar.AddContent(new SidebarButton("cfg-users", UIcons.User, "Users"));
sidebar.AddContent(new SidebarButton("cfg-billing", UIcons.Star, "Billing"));
}
}
}
Standalone
sidenav-standalone-sample.cs
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var standaloneSidenav = Sidenav();
standaloneSidenav.AddHeader(new SidenavButton("brand2", UIcons.Rocket, "App").AsBrand().Tooltip("My App"));
standaloneSidenav.AddContent(new SidenavButton("dash", UIcons.Dashboard, "Dashboard").Selected());
standaloneSidenav.AddContent(new SidenavButton("docs", UIcons.Document, "Docs"));
standaloneSidenav.AddContent(new SidenavButton("chart", UIcons.ChartHistogram, "Charts"));
standaloneSidenav.AddContent(new SidenavButton("inbox", UIcons.Envelope, "Inbox").ShowDot());
standaloneSidenav.AddFooter(new SidenavButton("settings", UIcons.Settings, "Settings"));
standaloneSidenav.AddFooter(new SidenavButton("user2", UIcons.User, "User"));
var component = HStack().WS().H(400).Children(
standaloneSidenav.HS(),
VStack().Grow().HS().Padding(16.px()).Children(
Message("Application content goes here")
)
);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}