breadcrumbs in navbar

As I was looking through some of the Hyperkitty redesigns, I noticed that there were different versions of the breadcrumbs in the navbar. One version looks like this:

Another version looks like this:

In my working branch, I’ve modified the latter version to look like this:

The change was partially because due to the fact that on some screens, the breadcrumbs can be extremely long. For example, see this page:

My thought was by aligning the breadcrumbs on the left margin, we’d get more space for potentially long strings. Of course, it’s still possible to have to resort to using ellipses for really long email titles, but at least we’d be able to squeeze in a few more characters by left-justifying the breadcrumbs. But, at first glance, this approach doesn’t work well with the first version shown in the Hyperkitty redesigns.
So as a compromise between the two designs, I’m thinking of options like:


I’m not sure if the dark background will draw too much attention to the breadcrumbs. The navbar also floats (i.e., it sticks to the top of the browser window when the user scrolls), so some could find the dark background distracting, especially given that the redesign is pretty light. With that in mind, another alternative might be something like this:

Well, I know breadcrumbs seems like a pretty minor issue to some, but these visual details are the kinds of things I sometimes fuss over 🙂