NOTICE: This has been revised. I made it far more difficult than it needs to be and I have simplified it. I also submitted a feature request to have dynamic text added as a special menu item so that we can build breadcrumb menus.

While I was looking at the buttons on the National World War II museum website, I noticed that they have a very interesting breadcrumb idea. The concept uses a menu in place of the traditional breadcrumb. Since we cannot place the title in the menu, we have to add some dynamic text.

Create a Menu

The first step is to create a menu in the WordPress menu manager with your categories. I am actually galed this is not automated or your menu could be a bit convoluted if you don’t have a good taxonomy system in place. This is also very helpful if you are like me and built a separate taxonomy system — I use a “Main Category” to augment my category structure, but that is another article in the works. Since this needs to be a dropdown, make sure to create your menu as a parent with submenu items.


  • Home
  • Categories
    • Category 1
    • Category 2
    • Category 3

Create A Breadcrumb

Since this is not an option in a breadcrumb element, would are going to need to create a custom breadcrumb.

  1. In a 1/1 column add two columns. You could add additional columns if need be
    • In the first column add your menu item and give it a class of breadcrumb-dropdown-menu. Choose the new menu you created and ttyle to match your needs. Turn off the mobile option.
    • In the the third column place a text element with the dynamic value set to page title. Assign the class at-current-title to the element.
  2. Set the nested column width to auto (I tried using a single columns set to flex-direction row, but the menu tried to all the available space).
  3. Z-Index – Depending on your page, you may need to adjust the z-index of your container to allow the menu to appear above other content.
  4. Overflow – Due to overflow changes when parallax images are involved, by default the menu the overflow is hidden, regardless of the container settings.There are work-arounds — separate ontainers and negative margins — but that is outside the scope of this article


The key to this is the CSS which is relatively simple. For me, the key was finding the right level within the Avada menu.

The Breadcrumb

This is for the title text, I needed to add the angle icon to this because the menu icon is in the wrong location. You will see in the example below, I am using a Font Awesome Pro icon. You should be able to find a free one that meets your needs or you can just use text as shown in the commented-out styles.

/* Optional if you need to shorten you breadcrumb */
.at-current-title p{
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
.at-current-title ::before{
/* content:"/"; */
  font-family:"Font Awesome 6 Pro";

The Dropdown

This is not needed for the feature to work but adds some additional styling to the dropdown. Some CSS transitions and borders give this a nice micro-interaction. You will notice in the CSS class definitions I have some commented out values “.breadcrumb-dropdown-menu .current-menu-item a” which can be used to lock the effect (text shift and border) on the current item.

.breadcrumb-dropdown-menu * {
    transition: all .15s;
.breadcrumb-dropdown-menu .fusion-dropdown-submenu a{
    position: relative;
    color: #181d23;
    display: block;
    padding: 8px 15px 8px 0;
    -ms-transform: translateX(0);
    transform: translateX(0);
    transition: all .2s ease-in!important;

.breadcrumb-dropdown-menu .fusion-dropdown-submenu a:hover/*,.breadcrumb-dropdown-menu .current-menu-item a*/{
    -ms-transform: translateX(6px);
    transform: translateX(6px);

.breadcrumb-dropdown-menu .fusion-dropdown-submenu a :after {
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    z-index: 20;
    top: 0;
    right: -14px;
    transition: width .2s ease-in;

.breadcrumb-dropdown-menu .fusion-dropdown-submenu a:hover :after/*,.breadcrumb-dropdown-menu .current-menu-item a :after*/ {
   right: 5px;
  width: 6px;
/* custom dropdown width since Avada has only 1 setting */
.breadcrumb-dropdown-menu .fusion-dropdown-submenu {
  min-width:16rem; /* 256px */
  max-width:20rem; /* 320px */

/* change the dropdown indicator */

.breadcrumb-dropdown-menu .fusion-open-nav-submenu:before {
  content: "\f175";
  font-family: "Font Awesome 6 Pro";
  line-height: 1;
.breadcrumb-dropdown-menu:hover .fusion-open-nav-submenu:before {
   content: "\f176";

Taking advantage of the layout system and conditional rendering, you can build a wide variety of options. The museum website has breadcrumbs with two and three instances. They use an overflow option — rather than a mobile menu — that I haven’t quite figured out yet.

As always, if you have comments or questions please enter them in the comments section.

Originally published on March 20, 2022

close up photo black Android smartphoneIt's the Little Things Part 2
Beautiful landscape of azure blue and green showing snow capped mountains and calm lake.Plugin Recommendation: Ultimate Dashboard Pro

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023