Bricks Navigator Pro brings site destinations and editor controls together for people working with Bricks. Its “Bricks” menu in the WordPress admin bar links to Pages, Templates, site areas, plugin settings, and Bricks resources. Administrators and other logged-in users see the menu when the WordPress toolbar is visible. To display it on Bricks editor pages, enable the option at Bricks → Bricks Navigator.

Choose destinations from the admin bar

• Open a Page or Template directly in Bricks, or open its list and select an item to edit with one click.
• Go to settings pages for Bricks-specific add-ons.
• Enable links to community sites, internal Bricks links, and external Bricks resources.
• External links open in a new tab. Use the provided new-tab icon to open site-specific menu items in a new tab.

Use classes and CSS in the editor

• Auto-select Class: When the selected element has a CSS class, enable the checkbox to automatically activate the first unlocked class in the classes panel.
• CSS Editor: Open a collapsible inline CSS editor in the Bricks element panel. It binds CSS and controls in both directions: editable CSS maps back to layout controls where possible, while properties that cannot be mapped are stored in the element’s Custom CSS field.
• BEM Classes: Use the action on a structure-panel layer to assign global classes in BEM format. A checkbox can move ID styles to the class.
• CSS Variables Context Menu: Right-click a CSS value input to insert a variable from registered custom properties. Hover over a variable for a live preview.
• Class Tooltip: Hold Shift or Cmd/Ctrl while hovering over an element in the structure panel to see its active CSS global classes.

Add elements with keyboard shortcuts

Press S for Section, C for Container, B for Block, H for Heading, T for Basic Text, I for Image, L for Text Link, W to wrap with Block, R for Rich Text, or D for Div. Press Alt+H to toggle :hover.

Install and configure

For automatic installation, search for “Bricks Navigator” on the WordPress extensions Add New page and install it. For manual installation, download the extension, upload the complete brickslabs-bricks-navigator folder to /wp-content/plugins/, and activate it. Configure available links and admin-bar behavior on the Bricks Navigator settings page.