User-Friendly Navigation – Breadcrumb Dropdown

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.

Example:

• 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 CSS

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:"/"; */
  content:"\f105";
  font-family:"Font Awesome 6 Pro";
  font-weight:300;
  color:currentColor;
  margin-left:4px;
  margin-right:10px;
}

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;
    opacity:0;
    background-color:#ed2423;
    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;
  opacity:1;
}
/* 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;
  font-weight:300;
  font-size:.8rem;
}
.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.