Navigation System

Navigation System

The UI provides two navigation layers: an enterprise top navbar with dropdown menus for cross-component access, and a sidebar tree for within-component navigation.

Enterprise Navbar

Implemented in src/partials/header-content.hbs (115 lines) — the largest single partial.

The navbar contains a site title link, search field, and 5 navigation elements:

Menu Type Contents

Components

Dropdown

16 items in 3 groups: Hub/Chronicles, Infrastructure cluster (infra-ops, ISE ops, ISE linux/windows, Identity & SSO), Platform cluster (Linux, Windows, Python, netapi, Automation, Secrets, SIEM, Observability)

Runbooks

Dropdown

4 categories: PKI & Certificates (8 runbooks), Infrastructure (5), Backup & Recovery (3), Documentation (2)

Tools

Dropdown

3 categories: Core Tools (dsec, netapi), netapi Commands (9 vendor-specific: ISE, WLC, Cloudflare, Vault, Keycloak, KVM, Synology, IOS, Wazuh), Data Tools (DataConnect Queries)

Linux

Dropdown

3 distro families: Arch Linux, RHEL/Rocky/Alma, Debian/Ubuntu

GitHub

Direct link

External link to github.com/EvanusModestus

All dropdown links use siteRootPath Handlebars helper for correct relative paths regardless of current page depth. Groups are visually separated by <hr class="navbar-divider"> elements with bold category headers.

Sidebar Navigation

The sidebar renders the current component’s navigation tree:

Partial Lines Role

nav.hbs

8

Container: toggle button + menu panel

nav-toggle.hbs

1

Hamburger button for sidebar show/hide

nav-menu.hbs

11

Menu wrapper: includes nav-tree recursively

nav-tree.hbs

21

Recursive {{#each}} loop rendering nested <ul>/<li> tree from page.navigation

The nav tree supports unlimited nesting depth via Handlebars {{> nav-tree}} self-reference. The increment helper tracks depth level for indentation.

Component Explorer

nav-explore.hbs (26 lines) renders a panel showing all site components:

  • Iterates site.components with {{#each}}

  • Shows component title + latest version badge

  • Highlights current component with is-current class

  • Provides cross-component navigation without using the top navbar

Mobile Responsive

src/js/05-mobile-navbar.js (20 lines) handles the burger menu toggle:

  • Listens for click on .navbar-burger button

  • Toggles is-active class on both the burger and #topbar-nav

  • Shows/hides the full navbar menu on small screens

Search

Search field is embedded in the navbar (#search-input). The search provider is configured in the Antora playbook (Lunr full-text search). Search scripts are conditionally loaded via search-scripts.hbs when env.SITE_SEARCH_PROVIDER is set.

Source Files

File Lines

src/partials/header-content.hbs

115

src/partials/nav-explore.hbs

26

src/partials/nav-tree.hbs

21

src/partials/nav-menu.hbs

11

src/partials/nav.hbs

8

src/partials/nav-toggle.hbs

1

src/js/05-mobile-navbar.js

20

src/css/nav.css

365

src/css/header.css

344