Navigation Improvments

Registered by Rob Cresswell on 2016-03-20

Summary
=======

Add breadcrumbs to every page in Horizon. This blueprint will:
- Make the default sidebar responsive
- Provide navigational hints even when the sidebar is collapsed via breadcrumbs
- Improve consistency of views (currently only details have breadcrumbs)
- Improve themability of breadcrumbs

Motivation
========

Navigation in Horizon is somewhat clumsy. Its entirely reliant on a highlighted panel name in the sidebar; if the sidebar is removed/ hidden (responsive design) or the current panel group closed due to accordion behaviour, you no longer have a frame of reference for where you are in Horizon. Furthermore, the Dashboard > Panel Group > Panel hierarchy isn't very explicit; when a regular user logs on, they are just greeted with a list of names, some underlined, others not, etc (in the default theme).

This blueprint aims to solve these issues.

Description
=========

- Update the breadcrumb template to make it more flexible; CSS truncating and requiring less config for custom breadcrumbs.
- Move the details header and actions into a smaller template. Details pages have a number of different templates, and also tends to be argued over a lot in design work; creating a template means it can be reused easier across views, and styled easier by individual design teams.
- Add the breadcrumb nav to the base template.
- Redesign the sidebar to make the Dashboard > Panel Group > Panel hierarchy more explicit, and make it collapse to a hamgburgler menu at smaller screen sizes.

UX
===

Every page should have a breadcrumb displaying the current position in the navigational hierarchy.

Wireframes, Mocks, Videos and UI Markup
---------------------------------------------------------

Will use the standard bootstrap breadcrumb: http://getbootstrap.com/components/#breadcrumbs

Testing
======

Breadcrumbs will automatically apply to standard panel views and details pages. There are two obvious edge cases:
- Angular tables
- Details views using different templates

Outside Dependencies
==================

None

Requirements Update Required
========================

None

Doc Impact
=========

None

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Medium
Drafter:
Rob Cresswell
Direction:
Approved
Assignee:
Rob Cresswell
Definition:
Approved
Series goal:
Accepted for 10.0.0-newton
Implementation:
Implemented
Milestone target:
None
Started by
Rob Cresswell on 2016-04-18
Completed by
Rob Cresswell on 2016-11-24

Related branches

Sprints

Whiteboard

Gerrit topic: https://review.openstack.org/#q,topic:bp/navigation-improvements,n,z

Addressed by: https://review.openstack.org/284421 -- MERGED
    Use breadcrumb nav across Horizon

Addressed by: https://review.openstack.org/297733
    Improve Horizon nav sidebar

Gerrit topic: https://review.openstack.org/#q,topic:bug/1315488,n,z

Addressed by: https://review.openstack.org/403810
    Improve Horizon nav sidebar

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.