Navigation
Set up Quiet's menus: a dash makes a header dropdown, overflow tucks into a More menu, and a hash in the secondary menu makes a footer column.
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.
| Label | URL |
|---|---|
Writing | /articles/ |
-Essays | /tag/essays/ |
-Notes | /tag/notes/ |
-Photography | /tag/photography/ |
About | /about/ |
Setting up a dropdown in Ghost Admin
The header dropdown
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.
Go to Settings → Navigation.
Add the parent item as usual.
Add each child directly underneath it, with a dash at the start of the label and no space after it.
Save.
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.
One level only
A dash makes a child. Two dashes do not make a grandchild: Quiet reads it as another child with a stray dash in its label. One level of nesting is the whole model.
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.
Esccloses the drawer and returns focus to the button that opened it.
The mobile drawer
Footer columns
The footer is built from secondary navigation, and a label starting with # becomes a column heading rather than a link.
| Label | URL | Result |
|---|---|---|
#Read | / | A column heading |
Archive | /articles/ | A link in that column |
Newsletter | /newsletter/ | A link in that column |
#Elsewhere | / | The next column's heading |
Bluesky | https://bsky.app/profile/you | A link in that column |
Setting up footer columns
The footer columns
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.
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.
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.
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.
Related
- Social links, for the icon row in the footer.
- Editorial conventions, for the
#footer-legal-linktag that fills the small print row.
Post
Quiet's three post settings: whether to show reading time, the author card and a Read next row. The picture at the top and the share row are decided elsewhere.
Social links
The icon row in Quiet's footer: nine accounts from Ghost's own settings, an RSS button, and any other platform through two lines in code injection.