Header · Bottom navigation

A floating bar at the bottom of the screen with links (icon and text) and a search: the magnifier opens a search box above the bar that searches the whole site, with a live results panel as you type. The current page in the brand color. Made for phones; it stays at the bottom on every screen.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Header · Bottom navigation 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 search box shows open here: the magnifier opens and closes it on the front end; type a word that matches a real page/post/product to see the live results panel (Query Filters needs the front end). 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.

Bottom navigation
  Container
    Bottom nav
      Bottom nav · List
        Bottom nav · Home
          Bottom nav · Link Home
            Bottom nav · Icon Home
            Bottom nav · Text Home
        Bottom nav · Shop
          Bottom nav · Link Shop
            Bottom nav · Icon Shop
            Bottom nav · Text Shop
        Bottom nav · Search
          Bottom nav · Search button
            Bottom nav · Icon Search
            Bottom nav · Text Search
        Bottom nav · Saved
          Bottom nav · Link Saved
            Bottom nav · Icon Saved
            Bottom nav · Text Saved
        Bottom nav · Account
          Bottom nav · Link Account
            Bottom nav · Icon Account
            Bottom nav · Text Account
      Bottom nav · Search box
        Bottom nav · Search row
          Bottom nav · Search field
          Bottom nav · Close search
            Bottom nav · Close icon
        Bottom nav · Search results
          Bottom nav · Search results · List
            Bottom nav · Search result
              Bottom nav · Search result · Link
      Bottom nav · Script (needs Execute code)

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.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Bottom nav · Search field › Content › Target query: the query loop it filters.
3. Select Bottom nav · Search result (query loop) › Query: post type, number of posts, order and filters.
4. 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.

/* «Bottom nav» · class .fbk-bnav */
.fbk-bnav {
  /* Bar */
  --fbk-t-bnav-bottom: var(--space-s);
  /* Corners of the bar and the room around its links (the links' corners
     follow: radius minus room) */
  --fbk-bnav-radius: var(--radius);
  --fbk-bnav-pad: 0.3em;
  --fbk-bnav-line: color-mix(in srgb, currentColor 12%, transparent);
}

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

• Turn on Bricks > Settings > Performance > Query filters, then save this page once in the builder so the search starts filtering (Bottom nav · Search result's loop needs it).
• The results panel (Bottom nav · Search results) is hidden in the builder so it doesn't cover the page while you edit: to see or style it, click the eye icon next to it in the Structure panel (Hide in builder), then click it again when you are done. It always works on the front end.
• Put it anywhere on the page (it stays fixed at the bottom). The page gets extra room at its end so the bar never covers the last lines.
• Current page: the attribute aria-current="page" on its link (Bricks also sets it on links to the page being viewed).
• Search: the magnifier (Bottom nav · Search button) opens Bottom nav · Search box: a Bricks Filter - Search element (Bottom nav · Search field) bound to the query loop Bottom nav · Search result (posts, pages and products, 5 at a time). As you type, Bricks fetches matches by AJAX and shows them in Bottom nav · Search results below the field, with no page reload; change what it searches in that loop's Query (post types, number per page). Each result's whole row is the link (not only its title); a small spinner (AJAX loader on that loop's Query) shows while Bricks fetches matches. Esc, the close button or a click outside close the whole box. Without "Execute code" the box stays open above the bar.
• Corners: --fbk-bnav-radius and --fbk-bnav-pad on .fbk-bnav (the links' corners follow).
• Hover effects (on by default): the class fbk-bnav--motion on Bottom nav lifts the icon and draws a line under the label; remove it for still links.
• 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:

• 767px and below — .fbk-section.

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-current, aria-expanded, aria-hidden, aria-label, aria-live).

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

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--light, fbk-section--dark.

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

Replaces

• 01 - Bottom Navigation Bar from Fancy Bricks 2.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.