# Breadcrumb nav style; less button more input?
**URL:** https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655
**Category:** UX
**Created:** [September 7, 2018, 4:13pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655 "2018-09-07T16:13:22Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [September 7, 2018, 4:13pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/1 "2018-09-07T16:13:22Z")
At the moment our breadcrumb nav dropdowns are styled as buttons… when we have category + subcategoy + tags our top bar can start feeling pretty heavy and gray (especially on mobile).
This is also a bit inconsistent of how we treat category dropdowns in the composer (and elsewhere). It’s a special case, but are we gaining anything from using the different style? Should we remove the background color to lighten things up and simplify?
There’s also the benefit of avoiding situations where a category color works OK on the main background color… but is kind of broken in the button. 👉
 
---
### Author:  [@nothing](https://meta.discourse.org/u/nothing)
#### Post date: [September 7, 2018, 7:55pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/2 "2018-09-07T19:55:05Z")
My idea.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [September 7, 2018, 8:49pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/3 "2018-09-07T20:49:09Z")
I still ❤ this:
but I don’t like this (too heavy):
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [September 8, 2018, 12:04am UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/4 "2018-09-08T00:04:00Z")
I like this, and the open box implies “I can type there”, which you kind of can?
So it is both visually and semantically better, I say go for it in 2.2
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [September 18, 2018, 6:39pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/5 "2018-09-18T18:39:43Z")
This change is live now
---
### Author:  [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [September 18, 2018, 7:02pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/6 "2018-09-18T19:02:00Z")
Looking good!
Perhaps I just need to get used to it, but the New Topic (and edit and notification state if applicable) are still grey. We now have 3 styles, white box with black outline, red box with no outline, and grey box with no outline. Something just seems off.
---
### Author:  [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [September 18, 2018, 7:08pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/7 "2018-09-18T19:08:29Z")
> [@jomaxro](#):
>
> We now have 3 styles, white box with black outline, red box with no outline, and grey box with no outline.
This makes sense though.
Buttons are grey, drop-downs are white and the current state is red.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [September 27, 2018, 5:57pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/8 "2018-09-27T17:57:10Z")
I noticed we did not apply this change to mobile yet @awesomerobot? That feels like an oversight?
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 27, 2018, 10:39pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/9 "2018-09-27T22:39:24Z")
I made a comment on GitHub about this, but it’s probably better to post it here. There is a cutoff issue that is still present on Safari and Chrome. You can see an example here with the letter “g” in the select-kit boxes for category and subcategory:
[https://meta.discourse.org/c/plugin/voting](https://meta.discourse.org/c/plugin/voting)
Right now there is `padding: 1px 0;` on:
`.select-kit .select-kit-header .selected-name`
What seems to do the trick is to also add that padding to:
`.select-kit .select-kit-header .selected-name .category-name`
Moving the padding from the first selector mentioned above to the second will break the tags dropdown, but adding it to `.category-name` seems to be fine.
If you want I can make a PR, but just wanted to make sure this doesn’t break any conventions that are in place.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [October 1, 2018, 4:49pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/11 "2018-10-01T16:49:21Z")
Text should no longer be cut off, I went a bit more extreme than your suggestions and ended up removing the `line-height: 1` from those category dropdowns and removed padding to compensate for the increased line-height. `line-height: 1` combined with `overflow: hidden` is just a recipe for eventual problems.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [October 1, 2018, 6:53pm UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/12 "2018-10-01T18:53:30Z")
Ah right, I did the category dropdowns but not the mobile nav for latest/new/top — just updated it.
On the fence about some other dropdowns in the topic list nav… they’re technically dropdowns, but always immediately associated with other buttons. Going to hold off on those for now and revisit.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [October 2, 2018, 12:37am UTC](https://meta.discourse.org/t/breadcrumb-nav-style-less-button-more-input/96655/13 "2018-10-02T00:37:20Z")
> [@awesomerobot](#):
>
> they’re technically dropdowns
It is the “dropdown that allows entry of search text” case where I feel the design cue of clear box is strongest.