Menu Bar Alpha

overview

A mobile menu bar for displaying quick links & CTAs.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

A mobile menu bar is a great way to display key actions you want the user to take on a mobile device. This enhances the user experience since users don’t have to hunt for key items such as phone numbers, contact info, or locations.

Menu Bar Alpha is an icon-based toolbar that you can conditionally display only on mobile devices. Each icon has a customizable tooltip, which also announces the text for assistive technology.

It’s super easy to swap out the icons and tooltip text and customize the style of the menu bar to fit your needs.

Query Loop Compatible

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--link-padding

--link-background

--link-background-hover

--divider-color

--icon-size

--icon-color

--icon-color-hover

--bricks-tooltip-bg

--bricks-tooltip-text

--bricks-tooltip-text-size

Accessibility Notes

Make sure you edit the tooltip text to match your icons/links.

Related Frames

No related frames.

Related Components

No related components.

FAQs

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.