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.
Properties
public NavLink SelectedLink { get; private set; }Gets or sets the selected link.
Methods
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.js
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);
}
}
}