Skip to main content
Prime Direction

Top Bar

Every page of Break is framed by two bars that stay in place while the page moves. A narrow rail runs down the left edge, and a top bar runs across the whole width. Most of what they hold fills itself from your content and your Ghost settings.

The Rail#

The rail runs down the left side of the window on a desktop in landscape. From top to bottom it holds:

PartWhat it does
Menu buttonOpens the menu panel with your full navigation. The m key does the same
Feed dateThe word Feed and today's date, written up the rail, in the site's timezone
Language switcherThe = items of your secondary navigation, one per language. See Navigation

On phones, tablets held upright and narrow windows the rail is hidden. A menu button appears beside the site mark in the top bar instead.

The Top Bar#

The top bar has three parts.

The start#

  • The site mark. A small square that links to the front page. It shows your Publication icon from ⛭ Settings → Design. Without an icon, it shows the first letter of the site title on a square in your accent color. See Logo.
  • The primary navigation. Your primary menu, with dropdowns and mega menus built from label prefixes. See Navigation.

When the links do not fit the bar, the ones at the end move into a more item, a button with three dots at the end of the navigation. Its dropdown lists the links that did not fit. A wider window brings them back into the bar. A link that had a dropdown of its own appears there as a plain link.

On phones and narrow windows the navigation is hidden from the bar. Readers reach it through the menu button.

The middle#

The middle of the bar is the live strip. It holds up to three things, in this order:

PartWhat it shows
ClockThe current time in the site's timezone, with the short name of the zone, for example 14:05 CET
TickerLive quotes for the symbols in the Ticker setting, with the change shown by a small triangle. See Markets
Now playingThe title of an audio episode while it plays. Click it to jump back to the player. See Audio Post

When a post tagged #breaking was published in the last 24 hours, the strip shares its place with the breaking flash, which shows a pulsing dot, the word Breaking and the post title. The flash shows first and holds for about seven seconds. Then the clock and the quotes come back for about six seconds, and the two keep taking turns. A click on the flash opens the post. See Live Updates.

The middle of the bar keeps the same width for the flash and for the strip, so the navigation never moves when they swap. When the quotes do not fit it, they scroll past in a loop after a short pause, and stop while the pointer is on them. A headline too long for it scrolls the same way, and the flash stays up until the whole headline has gone by once.

Readers who have turned on Reduce motion in their system see the flash alone, without the turns, with a long headline cut short. Without a flash they see the quotes standing still, with the ones that do not fit faded out.

On phones and narrow windows the live strip and the flash move to a second line under the bar, where they take turns the same way.

The end#

ButtonWhat it does
SearchOpens Ghost's own search. The / key does the same. See Search
BookmarksShows how many posts the reader has saved and opens a panel with them. See Bookmarks
SettingsOpens the settings panel: light and dark, reading mode, text size, spacing and the keyboard shortcuts. See Reading Preferences
SubscribeOpens Ghost's sign-up window. A signed-in member sees Account instead

The Subscribe button only appears when members are turned on in ⛭ Settings → Membership.

The Menu Panel#

The menu button opens a panel from the side of the window. It holds:

  • your logo and a close button
  • the primary navigation as large rows. An item with a dropdown opens and closes its list in place
  • the secondary navigation as smaller rows, without the language items
  • a Support us link when the Donate url setting is filled in
  • a subscribe form for visitors who are not members yet, when members are turned on

See Navigation for the Donate url setting and how dropdowns look in the panel.

Turning Parts Off#

Three parts of the live strip have their own keyword in Disabled features:

KeywordWhat it removes
tickerThe quotes in the top bar. The markets tape on the front page keeps working
clockThe clock
breakingThe breaking flash. The live column and the live page keep working
  1. Go to ⛭ Settings → Design
  2. Click Customize
  3. Open the Theme tab
  4. Add the keywords to Disabled features, separated by commas
  5. Click Save

See Features for the full list.

The Ticker setting#

The quotes come from the Ticker setting, which you find in the Homepage section of the Theme tab. It takes crypto symbols and currency pairs separated by commas. The default is BTC, ETH, EUR/USD. Clear the field to hide the quotes. The quotes stay hidden until the first one arrives, so the bar never shows empty boxes. See Markets for the symbols you can use.

Notes#

  • The clock and the feed date use the timezone set in ⛭ Settings → General.
  • The top bar and the bottom bar stay on screen in both reading modes. See Reading Mode.
  • Search, the bookmarks panel and the settings panel are available to every reader, signed in or not.