Navigation

Quiet reads both of Ghost's menus, at Settings → Navigation:

• Primary navigation is your header, and the drawer on a phone.
• Secondary navigation is your footer.

Two typing conventions in the label field do all the structural work, so there is nothing to configure in the theme.

Header dropdowns

Start a label with a dash and it becomes a child of the item above it.

That gives you a Writing dropdown holding three links, with Writing itself still reachable as the first row inside it, and About beside it as a plain link.

Dropdowns open on hover and on click, close on Esc with the focus returning to the button, and can be walked with the arrow keys.

The More menu

Quiet measures the header row and moves whatever does not fit into a More dropdown at the end, remeasuring when the window is resized or the font loads. A long menu never wraps onto a second line and never pushes your logo off the screen.

If a dropdown parent gets moved into More, its children come with it, shown as a small titled group inside the menu.

On a phone

Below tablet width the header collapses to a menu button and the links open in a drawer.

• Dropdown parents become collapsible groups.
• Groups start closed, except the one holding the page the reader is on.
• A long menu scrolls inside the drawer rather than running off the screen.
• Esc closes the drawer and returns focus to the button that opened it.

Footer columns

The footer is built from secondary navigation, and a label starting with # becomes a column heading rather than a link.

Ghost insists on a URL for every item, so give a heading any address you like: it is rendered as plain text and never becomes a link.

On a desktop screen up to four columns sit side by side beside your site name; the footer widens its grid to make room. A fifth column starts a second row under the others. Tablets show two columns to a row and phones one.

Without any headings

Every secondary link lands in a single column titled Elsewhere.

Without any secondary navigation at all

The footer falls back to your primary menu under a Read heading, so a site that has never touched the second menu still gets a link column. Dropdown children are left out of that fallback: they belong to the header's submenus, not to a footer digest.

Navigation icons

Any menu item can carry a small icon before its label, in the header, its dropdowns, the drawer, the footer and the 404 page. Upload one per item with Ghost's Navigation icons beta, or name one in a line of Code injection. Both are covered on Navigation icons.

Members-only items

Ghost lets you mark a navigation item as visible to members only. Quiet respects that in the header, the drawer and the footer, so a link to a members' area never shows to a signed-out reader. The visibility control is part of the same Navigation icons beta in Settings → Labs; with the beta off, Ghost shows every item to everyone.

With JavaScript switched off

Nothing disappears:

• Dropdowns flatten into a plain list, with the dash still visible on child labels.
• There is no More menu, so a long menu wraps onto a second line.
• The footer renders as one column with the headings as sub-headings inside it. Every link still works.
• Icons uploaded in Ghost still show beside their labels. Icons added from Code injection do not.

Related

• Navigation icons, for an icon beside any menu item.
• Social links, for the icon row in the footer.
• Editorial conventions, for the #footer-legal-link tag that fills the small print row.