Omnira Docs v1.0.0

Header and menu

The header is set once per demo in demo.json and appears on every page. The mobile menu is created from the same settings automatically.

src/demos/restaurant/demo.json
"nav": [
  { "label": "Home", "href": "index.html" },
  { "label": "Menus", "href": "menu.html", "match": "menu",
    "children": [
      { "label": "Dinner", "href": "menu-dinner.html" },
      { "label": "Drinks", "href": "menu-drinks.html" }
    ]
  },
  { "label": "Book a table", "href": "reservations.html" },
  { "label": "Contact", "href": "contact.html" }
]
  • label is the text, href the page it opens (a page file name, a #section-id on the same page, or a full https:// address).
  • children turns an item into a dropdown. On phones it becomes a tap-to-open list.
  • match (optional) highlights the item on every page whose file name starts with that text, e.g. "match": "menu" keeps “Menus” highlighted on menu-dinner.html.
  • The current page is highlighted automatically.

One-page layouts: if a demo has no nav, the menu is built from sections on the current page that have both an "id" and a "nav" label, and the links scroll to them.

The header button#

JSON
"header": {
  "cta": { "label": "Book a table", "href": "reservations.html", "icon": "calendar-check" }
}

icon is any Bootstrap Icons name without bi-. Add "style": "outline" for an outlined button. Remove cta to remove the button.

Top bar#

JSON
"header": {
  "topbar": {
    "items": [
      { "icon": "telephone", "text": "+1 (555) 013-4400" },
      { "icon": "clock", "text": "Open daily 5pm – 11pm" }
    ]
  }
}

The thin bar above the menu, with your social icons on the right. "topbar": {} shows your phone and email; remove topbar to hide it. On phones only the first item is shown.

Header styles#

"style"Looks likeUse it over
"transparent"See-through with white text; turns solid white when you scroll.Dark photo heroes.
"transparent-dark"See-through with dark text; turns solid when you scroll.Light heroes.
"light"Solid white bar.Anything.
"dark"Solid dark bar.Anything.

If you don't set a style, the right one is picked from the first section of each page. To force one for the whole demo, set "header": { "style": "light" } in demo.json.

Different header on one page#

A page file can override the demo's header settings:

src/demos/restaurant/pages/login.json
{
  "title": "Sign in",
  "header": { "style": "light", "topbar": null },
  "sections": [ … ]
}

null removes a setting on that page only.

Editing the menu in the HTML files#

The desktop menu is the <ul class="nav-o"> list and the phone menu is <ul class="mobile-links"> inside <div id="mobileNav">. Change both, on every page (use Replace in Files). A dropdown looks like this:

HTML
&lt;li class="has-dropdown"&gt;
  &lt;a href="menu.html" aria-haspopup="true"&gt;Menus &lt;i class="bi bi-chevron-down dd-caret" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;ul class="dropdown-o"&gt;
    &lt;li&gt;&lt;a href="menu-dinner.html"&gt;Dinner&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="menu-drinks.html"&gt;Drinks&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;