Navigation > Side Navigation

[julien-deramond]

References

• Orange Design System: Modules > Side navigation

Details

• Side Navigation with icons and labels in white — WEB-NAV-SNI-001
• Side Navigation with icons and labels in black — WEB-NAV-SNI-002
• Side Navigation with labels in white — WEB-NAV-SNL-001
• Side Navigation with labels in dark — WEB-NAV-SNL-002
• Collapsible side navigation with drawer — WEB-NAV-SND-001
• Collapsible side navigation in white — WEB-NAV-SNC-001
• Collapsible side navigation in dark — WEB-NAV-SNC-002

More specifications

• Clicking on the active button shouldn't trigger the hide function (like in the associated CodePen).
• The focus should be trapped inside the menu if it is extended
• The menu should close on the close button only (with an option to close it by clicking outside)
• The close button should be 100% x 40px and at the far right and shouldn't have hover state
• The menu should be absolute in normal case (with an option to make it static if possible)
• The absolute menu should have an escape key such as Esc
• There should be no open/close button on mobile viewports
• There shouldn't be any tooltip in mobile viewports
• Should use .offcanvas-* class to have a responsive behavior
• Should have an .active state on every component + should spread to parent if in collapsed menu

Prototyping phase

• https://codepen.io/louismaximepiton/pen/GRQMEqo

Pre-requisites

• Prototyping Side Navigation component #1238