Keep site destinations close at hand

Bricks Navigator Pro adds a “Bricks” menu to the WordPress admin bar for people working with Bricks Builder. Use it to open Pages and Templates directly for editing with Bricks, or view their lists and pick an item to edit. The menu can also link to options for Bricks-specific plugins, community websites, internal Bricks links, and external Bricks resources.

The menu is available to administrators and other logged-in users when the WordPress toolbar is visible. To show it on Bricks editor pages, enable that option in Bricks → Bricks Navigator. External links open in a new tab. A new-tab icon is provided for opening site-specific menu entries in a new tab.

Editor tools for classes and CSS

• Auto-select Class: When a selected element has a CSS class, a checkbox can automatically activate the first unlocked class in the classes panel.
• CSS Editor: Use the collapsible inline panel in the Bricks element panel to edit CSS with two-way binding to controls. Editable CSS maps back to layout controls where possible. 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 to see its 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.

Keyboard shortcuts for common elements

Add common Bricks elements with a single key 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, and D for Div. Press Alt+H to toggle :hover.

Installation and settings

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