Demo navbar

See how the classic navbar looks


Try the classic navbar at the top of this page. On a narrow screen, focus Toggle navigation and press Enter or Space to show the links. Open a dropdown with Enter or Space, use the arrow keys to move between its links, and press Escape to close it.

This demo shows the updated navbar controls available in v2.2.0 and later. They are not included in the v2.1.0 gem or a remote theme pinned to that release.

The navbar stays at the top while you scroll. It uses this site's menu entries and navbar.expand breakpoint, rendered by the same classic component as a standard theme page.

For your own menu, follow Add or change a menu link. Style and breakpoint values are in the navbar reference.

Front matter for this demo

This demo selects the theme's classic navbar while the rest of the documentation can use a floating menu. For a standard layout, omit navbar.style in _config.yml to use the classic navbar.

---
layout: compress
title: Demo navbar
subtitle: See how the classic navbar looks
excerpt: See how the classic navbar looks
permalink: "demo/classic-navbar"
include_on_search: false
header_type: "base"
---