Header · Mega menu tabs

Logo and a menu whose Platform mega menu has the categories on the left and their content on the right (cards with an icon and a strip with a button); a dropdown with short descriptions and two links. On phones the categories become chips above their content.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

See it live: Header · Mega menu tabs on fancybricks.co — the live preview, and the button that copies it.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: the categories of Platform open on click here; on the live site they also open on hover and with the up and down arrow keys. Save and open the page to see the full result.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Header · Mega menu tabs   (FBK Header)
  Nav · Logo
  Nav · Menu
    Nav · Items
      Nav · Close button
      Nav · Dropdown Platform
        Nav · Submenu Platform
          Tabs
            Tab menu
              Tab · Plan
                Tab · Icon
                Tab · Name
                Tab · Arrow
              Tab · Build
                Tab · Icon
                Tab · Name
                Tab · Arrow
              Tab · Launch
                Tab · Icon
                Tab · Name
                Tab · Arrow
              Tab · Report
                Tab · Icon
                Tab · Name
                Tab · Arrow
            Tab content
              Pane · Plan
                Pane · Body Plan
                  Nav · Label Plan
                  Nav · Grid Plan
                    Menu card · Roadmaps   (FBK Menu card)
                    Menu card · Goals   (FBK Menu card)
                    Menu card · Timelines   (FBK Menu card)
                    Menu card · Workload   (FBK Menu card)
                  Nav · Foot Plan
                    Nav · Foot text Plan
                    Button · See all planning tools   (FBK Button)
              Pane · Build
                Pane · Body Build
                  Nav · Label Build
                  Nav · Grid Build
                    Menu card · Boards   (FBK Menu card)
                    Menu card · Docs   (FBK Menu card)
                    Menu card · Automations   (FBK Menu card)
                    Menu card · Integrations   (FBK Menu card)
                  Nav · Foot Build
                    Nav · Foot text Build
                    Button · Browse integrations   (FBK Button)
              Pane · Launch
                Pane · Body Launch
                  Nav · Label Launch
                  Nav · Grid Launch
                    Menu card · Checklists   (FBK Menu card)
                    Menu card · Approvals   (FBK Menu card)
                    Menu card · Release notes   (FBK Menu card)
                    Menu card · Status page   (FBK Menu card)
                  Nav · Foot Launch
                    Nav · Foot text Launch
                    Button · Get the template   (FBK Button)
              Pane · Report
                Pane · Body Report
                  Nav · Label Report
                  Nav · Grid Report
                    Menu card · Dashboards   (FBK Menu card)
                    Menu card · Time tracking   (FBK Menu card)
                    Menu card · Insights   (FBK Menu card)
                    Menu card · Exports   (FBK Menu card)
                  Nav · Foot Report
                    Nav · Foot text Report
                    Button · See a sample report   (FBK Button)
      Nav · Dropdown Solutions
        Nav · Submenu Solutions
          Nav · Subitem Agencies
            Nav · Subitem title Agencies
            Nav · Subitem text Agencies
          Nav · Subitem Product teams
            Nav · Subitem title Product teams
            Nav · Subitem text Product teams
          Nav · Subitem Marketing
            Nav · Subitem title Marketing
            Nav · Subitem text Marketing
      Nav · Link Pricing
      Nav · Link Docs
      Nav · Panel extras
        Panel · Buttons
          Button · Log in (panel)   (FBK Button)
          Button · Start free (panel)   (FBK Button)
    Nav · Menu button
  Button · Log in   (FBK Button)
  Button · Start free   (FBK Button)
  Mega menu · open categories on hover, up/down keys (JS)
  Tabs · sliding line (JS, optional)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Header · Mega menu tabs (FBK Header) › Properties: Layout group: Layout, Menu panel, Phone menu text size, Position, Mega menu width, Phone submenus · Style group: Link effect, Submenu link effect, Submenu opening, Bar style, Background · Show or hide group: Hide actions.
3. Select Menu card · Roadmaps, Menu card · Goals, Menu card · Timelines (+13 more) (FBK Menu card) › Properties: Icon, Title, Text, Link, Badge · Show or hide group: Hide badge, Hide text, Hide icon · Style group: Layout, Icon box, Look, Tone, Shape, Hover effect, Background.
4. Select Button · See all planning tools, Button · Browse integrations, Button · Get the template (+5 more) (FBK Button) › Properties: Text, Link, Tone, Shadow on hover · Icon group: Icon, Icon position · Style group: Style, Size, Width, Hover effect.
5. Select Nav · Menu › the menu items are elements inside it: add, remove or reorder them in the Structure panel.
6. Select Tabs › one tab = a title and its pane, in the same order: duplicate both to add one.
7. Spacing, sizes, color and timing with no property of their own: the CSS variables below.

CSS variables

These are the only values in the template meant to be changed by hand. Copy the block, paste it, edit the numbers.

The Custom CSS field of this template's own element, with one of its variables as a real example.

/* «Tabs» · class .fbk-hmtabs */
.fbk-hmtabs {
  /* Width of the category column */
  --fbk-t-menu: 14em;
}

Paste the block in the element's Style → CSS field (the selector is already in it), or set the same variables on the class itself to change every copy at once. The values are your framework's variables, so they follow your site: Choosing a framework.

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• Platform is a Nav-Nested Dropdown with Mega menu on (CSS selector .fbk-nav); inside, a Bricks Tabs element (class fbk-hmtabs). Each category is a Tab title in Tab menu and a Pane in Tab content, in the same order: to add one, duplicate both.
• A pane holds a label, a grid of FBK Menu cards (.fbk-hmtabs__grid: two columns, one in the phone menu) and a Nav · Foot strip (fbk-nav__mega-foot) with a line of text and a button.
• Category column width: --fbk-t-menu on .fbk-hmtabs (14em). The categories are the house vertical tabs (fbk-tabs--vertical: the line beside the content and the 2 px line that slides to the open one, code element Tabs · sliding line; delete it and the open one draws its own line); the arrow: .brx-open > %root% in .fbk-hmtabs__chevron. Chips in the phone menu: .fbk-nav__nested.brx-open %root%.tab-title in .fbk-hmtabs__tab.
• Hover effects (on by default, each removable): categories open on hover with a short wait (the code element Mega menu · open categories…; delete it and they open on click), panes fade (fbk-tabs--motion on Tabs), the cards fill (fbk-mcard--fill: Hover effect of each FBK Menu card), the panel opens as a growing circle (fbk-nav--open-reveal: Submenu opening of FBK Header) and the buttons sweep.
• Mega menu width is a property of FBK Header: Container (here) or Full width. Phone submenus: Slide (here) or In place.
• Nav · Panel extras (class fbk-nav__panel-only) only shows in the phone menu: the buttons the bar hides on phones.
• The header is the FBK Header component: put your logo, menu and buttons in its slots (Logo, Menu, Actions; a top bar or a row over the bar goes in the Top slot, rows and scripts under it in the Bottom slot). Layout, link effect, submenu effect, menu panel, position (sticky, over the hero), bar style and background are its properties.
• This is a Bricks header template: in your site set where it shows (Template settings > Conditions), or paste its section into your own header template.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-nav, .fbk-nav__nested.
• 767px and below — .fbk-nav__actions, .fbk-nav__nested, .fbk-nav__panel-only (+1 more).

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

This section stays light whatever your site does: it does not carry the fbk-section--auto-dark class, which is only added to templates checked on a dark background.

How the library follows your site's color scheme: Dark mode and preview.