Navbar
Description
A navigation bar component
A Sidebar rendered as a Navbar. Header items are inline, others are in a drawer.
Page Content below the navbar...
API reference
public sealed class Nav : ComponentBase<Nav, HTMLUListElement>, IContainer<Nav.NavLink, Nav.NavLink>, IHasBackgroundColorA hierarchical, vertically-stacked navigation tree with support for nested sections, icons and badges.
- Namespace
- Tesserae
- Inheritance
- ComponentBase<Nav, HTMLUListElement> → Nav
- Implements
- IContainer<Nav.NavLink, Nav.NavLink>, IHasBackgroundColor
Constructors
| Name | Description |
|---|---|
| Nav | Initializes a new instance of this class. |
Properties
| Name | Description |
|---|---|
| SelectedLink | Gets or sets the selected link. |
| Background | Gets or sets the CSS background of the component. |
public NavLink SelectedLink { get; private set; }Gets or sets the selected link.
Methods
| Name | Description |
|---|---|
| Render | Renders the component's root HTML element. |
| Add | Adds the given item to the component. |
| Clear | Clears the component's current state. |
| Replace | Replaces an existing item with a new one. |
| Links | Configures the component to links. |
| InlineContent | Sets a piece of content shown inline next to the navigation item. |
| Compact | Renders the component in a compact form. |
| NoLinkStyle | Removes / disables the link style on the component. |
| SelectMarkerOnRight | Renders the selection marker on the right side of the nav. |
public void Replace(NavLink newComponent, NavLink oldComponent)Replaces an existing item with a new one.
public Nav InlineContent(IComponent content, bool disableMouseEvents = false)Sets a piece of content shown inline next to the navigation item.
Sample
navbar-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 navbar = Sidebar().AsNavbar();
navbar.AddHeader(new SidebarButton("brand", UIcons.Rocket, "My App").Primary());
navbar.AddHeader(new SidebarButton("dashboard", UIcons.Dashboard, "Dashboard"));
navbar.AddContent(new SidebarButton("profile", UIcons.User, "Profile"));
navbar.AddContent(new SidebarButton("settings", UIcons.Settings, "Settings"));
navbar.AddContent(new SidebarSeparator("sep1"));
navbar.AddContent(new SidebarButton("logout", UIcons.SignOutAlt, "Logout"));
navbar.AddFooter(new SidebarButton("footer", UIcons.Info, "About"));
var component = VStack().H(500.px()).Children(
navbar,
TextBlock("Page Content below the navbar...").Padding(16.px())
);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}