The Navigation for OpenCAESAR, despite having an initial set of five items may need to scale for different use cases if the site grows (or the design system is applied in a new context).
To address this, designs were created to accommodate the need for long text strings, that would cause the additional items to line break. These designs are now live on Zeplin under the following examples:
Long Text String Example
https://zpl.io/25Jrez3
Additional Nav Item Example (Closed/Default and Open)
https://zpl.io/bo89YJg (Closed - Default)
https://zpl.io/bA7EAgp (Open)
*Note that the above is only done on Desktop as the Mobile example should scroll within the open Mobile Navigation Menu.
Nested Example (Closed/Default and Open)
Desktop
https://zpl.io/agQN97Z (Closed - Default)
https://zpl.io/VQvEoLk (Open, on Hover)
Mobile
https://zpl.io/awJ1nGM (Closed - Default)
https://zpl.io/bA7EAP8 (Open, when tapping the Carrot)
The Navigation for OpenCAESAR, despite having an initial set of five items may need to scale for different use cases if the site grows (or the design system is applied in a new context).
To address this, designs were created to accommodate the need for long text strings, that would cause the additional items to line break. These designs are now live on Zeplin under the following examples:
Long Text String Example
https://zpl.io/25Jrez3
Additional Nav Item Example (Closed/Default and Open)
https://zpl.io/bo89YJg (Closed - Default)
https://zpl.io/bA7EAgp (Open)
*Note that the above is only done on Desktop as the Mobile example should scroll within the open Mobile Navigation Menu.
Nested Example (Closed/Default and Open)
Desktop
https://zpl.io/agQN97Z (Closed - Default)
https://zpl.io/VQvEoLk (Open, on Hover)
Mobile
https://zpl.io/awJ1nGM (Closed - Default)
https://zpl.io/bA7EAP8 (Open, when tapping the Carrot)