Navigation
Toolbar
A toolbar is a compact strip of icon buttons and controls grouped together, giving quick access to the actions most often used in an editor or view.
- Also called
- Action bar, Formatting toolbar, Editor toolbar, Floating toolbar
- Spotted on
- 7 of 422 homepages
- Browse examples
- Feature sections →
What is a toolbar?
Toolbars belong to products, not marketing pages, so on SaaS sites they appear inside product visuals: the formatting bar above a document, the share-sort-filter row above a table, the tool strip in a design canvas. Cortex's hero toolbar shows share, sort and filter controls; Tatem's editor demo types a sentence, selects words and raises a formatting toolbar; Beehiiv closes on an editor mockup with greyed toolbar controls.
A toolbar in a mockup quietly says "this is a real, hands-on tool". The animated version, where text is selected and a floating toolbar pops up, is one of the most effective ways to show an editor in a few seconds, because it demonstrates the interaction rather than describing it.
When drawing one, fewer controls read better at marketing scale. A full production toolbar of twenty icons shrinks into noise in a hero screenshot; the four or five controls that relate to the headline's claim tell the story.
When to use a toolbar, and when not to
Use it for
- Showing an editorA writing, design or code product where the toolbar instantly signals what kind of tool it is.
- Demonstrating an interactionAn animated demo where selecting content raises a contextual toolbar.
- Explaining data controlsA table or report mockup where sort, filter and share explain how the product is used.
Avoid it for
- Marketing page chromeA marketing page doesn't need a toolbar of its own; its actions are links and buttons.
- Unreadable icon wallsA full-width row of tiny icons in a scaled-down screenshot reads as clutter.
- Unlabeled, unfamiliar iconsIf the icons aren't universally understood, add tooltips or labels in the real product.
Anatomy of a toolbar
- 1ContainerA horizontal bar, docked to the top of a pane or floating near the selection.
- 2Control groupsRelated buttons clustered together, such as text style, alignment or insert actions.
- 3SeparatorsThin dividers between groups that make a long row scannable.
- 4Overflow menuA "more" button holding the actions that don't fit.
Common toolbar variants
1. Docked toolbar
Fixed across the top of an editor or table, always visible.
2. Floating toolbar
Appears above selected text or objects and disappears when the selection ends.
3. Vertical tool rail
A column of tools on the left edge of a canvas, typical of design apps.
Spotted in our design reviews
Our reviews describe a toolbar on 7 of the 422 SaaS homepages in the catalog. A few of them:
Below, three panels imitate the Figma editor, with grey bars standing in for layers and a toolbar underneath, and the middle panel holds the Droplette window with its logo.
Droplette · Above the fold
Its toolbar shows share, sort and filter controls.
Cortex · Above the fold
The first block is headed "Flags you’ll enjoy using" Two cards sit side by side: a code editor with autocomplete, "Type-safety with the CLI", and a toggle list, "Toggle features with our toolbar".
Reflag · Developer tooling demo cards
Its panel types out a sentence, "Once upon a time, humans were drowning in emails and calendar invites.", then selects words and raises a formatting toolbar.
Tatem · Split inbox and text editor panels
A white section, "You've been building inside boxes long enough.", follows, with a struck-through line naming Section, Row, Column and Element, then a single demo box reading "Kirki gives you a canvas." with selection handles and a floating toolbar.
Kirki · Template kits and the canvas pitch
Step 04, "Ready-made assets export.", sits on deep red beside an "Assets" toolbar.
Fourmula · Four-step process panels
The closing call to action sits inside a rounded indigo frame holding a white editor mockup with greyed toolbar controls.
Beehiiv · CTAs
Often confused with
Toolbar vs. navigation bar
A navigation bar moves visitors between pages. A toolbar acts on the content in front of them.
Toolbar vs. context menu
A context menu opens on right-click as a vertical list; a toolbar is a row of always-visible or selection-triggered buttons.
Frequently asked
Should a hero screenshot show the full product toolbar?
Usually a trimmed one. At marketing scale only a handful of controls are legible, so keep the ones that support the headline's claim and drop the rest.