StellarNav Menu System - Simple Website Framework

The framework uses StellarNav — a lightweight, responsive, multi-level dropdown menu — for site navigation. The navigation content itself is driven by a plain Markdown file, making it easy to edit without touching any PHP or HTML.

Editing the Navigation

Open pages/navigation.html and edit it like any other page file. The navigation is a standard Markdown unordered list. The framework reads this file, passes it through the Markdown parser, and hands the resulting HTML to StellarNav for enhancement.

Basic structure:

- [Home]()
- [About](/about)
- [Blog](/archives)
- [Contact](/contact)

With dropdown menus — indent sub-items by one level:

- [Home]()
- [Documentation](#0)
    - [Introduction](/documentation/introduction)
    - [For Developers](#0)
        - [Caching](/documentation/developers/caching)
        - [Plugins](/documentation/developers/addingplugins)
- [Contact](/contact)

Key syntax rules:

Use #0 as the href for any parent item that should open a dropdown but not be a link itself. This prevents visitors from accidentally navigating to a dead link.
Dropdowns support up to three levels of nesting.
Standard relative URLs work for internal links (e.g. documentation/introduction). No leading slash is required because the framework sets a tag.
External links work as normal: [GitHub](https://github.com).

StellarNav Configuration

StellarNav is initialised in themes/skeleton/navigation-options.php. The default configuration used by the framework is:

jQuery('.stellarnav').stellarNav({
    theme: '',
    breakpoint: 1024,
    menuLabel: 'Menu',
    sticky: false,
    position: 'static',
    openingSpeed: 250,
    closingDelay: 250,
    showArrows: true,
    phoneBtn: '',
    phoneLabel: 'Call Us',
    locationBtn: '',
    locationLabel: 'Location',
    closeBtn: false,
    closeLabel: 'Close',
    mobileMode: false,
    scrollbarFix: false
});

To change any of these, edit navigation-options.php in your active theme folder.

Options Reference

Option	Type	Default	Description
`theme`	string	`''`	Adds a default colour scheme. Options: `''` (none), `'light'`, `'dark'`
`breakpoint`	integer	`1024`	Screen width in pixels at which the nav switches to mobile mode
`menuLabel`	string	`'Menu'`	Label shown on the mobile hamburger button
`sticky`	boolean	`false`	Makes the nav stick to the top of the page on scroll (desktop only)
`position`	string	`'static'`	Mobile nav position: `'static'`, `'top'`, `'left'`, `'right'`
`openingSpeed`	integer	`250`	Time in milliseconds for dropdown open animation
`closingDelay`	integer	`250`	Time in milliseconds dropdowns stay open after mouse-out
`showArrows`	boolean	`true`	Show arrow indicators on items that have sub-menus
`phoneBtn`	string	`''`	Phone number for a click-to-call button (e.g. `'18005551234'`). Empty disables it
`phoneLabel`	string	`'Call Us'`	Label for the phone button
`locationBtn`	string	`''`	URL for a location button. Empty disables it
`locationLabel`	string	`'Location'`	Label for the location button
`closeBtn`	boolean	`false`	Adds a close button at the end of the mobile nav
`closeLabel`	string	`'Close'`	Label for the close button
`mobileMode`	boolean	`false`	Forces mobile layout regardless of screen width
`scrollbarFix`	boolean	`false`	Fixes a horizontal scrollbar issue that can appear on very long nav menus

Mega Dropdowns

For very large menus, StellarNav supports "mega dropdowns" — full-width panels that organise many items into columns. Add the mega class and a data-columns attribute to a top-level

element. Since the nav is generated from Markdown, you would need to write this portion as raw HTML directly in pages/navigation.html:

<ul>
  <li class="mega" data-columns="3">
    <a href="#0">Large Section</a>
    <ul>
      <li><a href="/page-a">Page A</a></li>
      <li><a href="/page-b">Page B</a></li>
      <li><a href="/page-c">Page C</a></li>
      <!-- ... more items ... -->
    </ul>
  </li>
</ul>

data-columns can be any integer from 2 to 8. Defaults to 4 if omitted or out of range.

Drop-Left Menus

If a dropdown near the right edge of the nav would overflow off-screen, add the drop-left class to that

to make it open leftward instead. Like mega dropdowns, this requires writing that nav item as raw HTML in pages/navigation.html:

<li class="drop-left"><a href="/last-item">Last Item</a>
    <ul>
        <li><a href="/sub-a">Sub A</a></li>
    </ul>
</li>

Alternatively, set scrollbarFix: true in the StellarNav options if you would rather let the menu overflow and suppress the scrollbar.