I recently had a design challenge: how do I create a dropdown menu in breadcrumbs? This challenge lead me to write an interesting solution whose I’ll share here. This article will be focused on the dropdown activator.

#What I wanted to achieve

My dropdown activator needed the following:

• Look like a breadcrumb, followed with a ”▼” dropdown icon
• Be keyboard accessible

It turned out that these two requirements were fairly easy to meet, and each corresponds to a single CSS property.

#An ugly button

I wanted my dropdown activator to be a <button> because it’s already accessible. This element was made to create interactive interfaces, and I did not want to waste time making <span onclick> work like a button.

Let’s start with “basic” HTML:

<Breadcrumbs>
  <Item><a href="/">Inbox</a></Item>
  <Item><button click="showDropdown">Gautier ▼</button></Item>
  <Item>Latest messages</Item>
</Breadcrumbs>

I’m using a Svelte/React/Vue syntax here, but you might consider for instance that <Breadcrumbs> means <div class="breadcrumbs"> with pure HTML and Bootstrap.

Here’s what it looks like:

While it looks ugly, it behaves exactly as I want it to behave: it’s a keyboard accessible button – you may tab tab return your way into it.

#Make it look like it belongs

We want to make our button looks like its surrounding text. The great news is that browsers now support a way to reset CSS on an element: the all property.

This property can take four different values, let’s try them all!

<button style="all: ...">Button</button>

Okay, this looks quite chaotic, but we have found what we wanted: unset make our button look like is surrounding text, with the correct font and all. Let’s try it on our dropdown activator:

It looks great now! There is however an issue that is hard to notice: it is not keyboard accessible anymore. When tabbing to it, the focus ring is not visible anymore. From there, two possibilities:

• Add a button:focus style with some cool focus effects
• Bring the focus ring back

While the first option would perfectly work, I chose…

#Bringing back the focus ring

Indeed, I quite like the default focus ring, and it creates a sense of unity with the link right before the button. Well, we saw earlier that revert and initial both bring back the default browser style, let’s try them both.

<button style="all: unset; outline: ...">Button</button>

Sorry mobile users, you will have to trust me on this one. However, if you have a keyboard near your fingers, you may try tabbing between the buttons.

Here’s all the CSS put together:

button {
  all: unset;      /* Makes it look like text */
  outline: revert; /* Brings back the focus ring */
}

We now have a beautiful and accessible dropdown button!