716018 - Breadcrumb on Support Forum should look like an obvious navigation tool

Status: VERIFIED FIXED

(support.mozilla.org :: Questions, task)

Description

[Bram Pitoyo [:bram]]

The breadcrumb is the only way to go up the level from a specific entry, for example:
https://support.mozilla.org/en-US/questions/910041

To the full list of questions:
https://support.mozilla.org/en-US/questions/


But
1) it’s not big enough to be clickable, and
2) it doesn’t look like it serves a navigational purpose

Comment 1

[Kadir Topal [:atopal]]

Bram, can you provide the UI for this?

Comment 2

[Bram Pitoyo [:bram]]

Attachment: Text breadcrumb

The breadcrumb style that Mozilla.com is using

Comment 3

[Bram Pitoyo [:bram]]

Attachment: Text breadcrumb, no home icon

Comment 4

[Bram Pitoyo [:bram]]

Attachment: Button breadcrumbs, square

Styling breadcrumbs into buttons make them more targetable

Comment 5

[Kadir Topal [:atopal]]

Can we combine both? The buttons are a good improvement over the mozilla.com style, but now it's not clear that there is a hierarchy.

Comment 6

[Bram Pitoyo [:bram]]

I was thinking of implementing a breadcrumb navigation with arrowed buttons (chevron) similar to The Guardian: http://www.guardian.co.uk/environment/ethical-living

Arrowed buttons has the benefit of being more helpful than square ones (ie. they have a direction) or just text (ie. they give you a clearly marked clickable area).

Comment 7

[Bram Pitoyo [:bram]]

Demo (note that the rightmost text should not be hover-able because it indicates the current page):
http://people.mozilla.com/~bpitoyo/sumo/breadcrumb/breadcrumb.html

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

Going with Comment 7.

Per discussion during planning, we will apply this to all breadcrumbs on the site.

Comment 9

[Kadir Topal [:atopal]]

There is a nice, and simple solution that works with CSS only (no images and no JS), here: http://css-tricks.com/triangle-breadcrumbs/

Comment 10

[Ricky Rosario [:rrosario, :r1cky]]

https://github.com/mozilla/kitsune/commit/f38728a6cfc10adc888c05d299ad02fd795948b6

Comment 11

[Rebecca Billings [:rbillings]]

Verified implementation of new breadcrumbs. Filed bug 723366 relating to display on Firefox 9 & 10.

Comment 12

[Crystal Beasley [:skinny, :crystal]]

We need to use the One Mozilla style of breadcrumbs as shown on 

http://careers.mozilla.org

Comment 13

[Ricky Rosario [:rrosario, :r1cky]]

This already shipped today and was verified, probably was better to file a new bug. How urgent is this? I assume there are plenty of more changes coming for the One Mozilla redesign?

Comment 14

[James Socol [:jsocol, :james]]

Yes, please don't reopen bugs marked VERIFIED, just file a new one.

Comment 15

[James Socol [:jsocol, :james]]

Filed bug 725287.

-> VERIFIED by comment 11.

Comment 16

[Ricky Rosario [:rrosario, :r1cky]]

undoing my previous changes :-)