In page secondary navigation
Description
Sometimes our application is complex, with a main nav and tabs, it is not enough to show the proper structure of the page. Now what we are doing is Tabs under tabs, but tab under tab does not really show the hierarchy properly and also visually noise.
Maybe it is time for us to consider secondary navigation inside a page layout.
Here are some quick ideas, usages and examples.
The advantage of having a secondary nav could be:
- Have more structure layout when we have to use a complex structure (avoid tab under tab situation)
- Give us more space to explore more options for our main nav (such as @mvanremmerden's video, todo: the link later, Slack is down... can't find it)
- It could be multip usages, such as steppers, email like layout etc
This is just a first thought, there must be a lot of things to consider and discuss. Feel free to drop your opinion in the comments, add new designs etc. @gitlab-com/gitlab-ux/designers
Todo: a mobile version(Missing in the design below)
Some visual style inspiration
Figma file
Checklist
Make sure the following are completed before closing the issue:
-
Assignee: Design in your working file. When applicable, follow our structure, building, and annotation guidelines. If you have any questions, reach out to a FE/UX Foundations designer. -
Assignee: Update the link to the working file in the issue description. -
Assignee: Ask a FE/UX Foundations designer to review your design (ensure they have edit permissions in Figma). -
Reviewer: Review and approve assignee’s design. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility. -
Reviewer: Assign to a Figma maintainer for final review (make sure they have edit permissions in Figma). -
Maintainer: Review and approve assignee’s changes. -
Maintainer: Add the changes or additions to the target file. For example, you’d copy a final chart design from the working file and paste into the related location in the Data Visualization file. -
Ensure that all styles and components now belong to the target file. -
For changes to the Component Library file, view the components in the Assets panel to ensure they align with our asset library structure guidelines.
-
-
Maintainer: When applicable, publish any library changes along with a clear commit message. -
Assignee: Move your working file to the shared Figma project: -
For Component Library changes, move your file to the Component archive project. -
For all other changes, move your file to the Misc archive project. -
If you’re a community contributor, we ask that you transfer ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
-
-
Assignee (or Maintainer, for community contributions): If it’s a new pattern or a significant change, add an agenda item to the next UX weekly call to inform the team. -
Assignee: When applicable, create an MR in this repository and apply the "component-guideline" template to create or update the component’s documentation page. If you do not have capacity, create an issue in this repository using the "Component documentation" issue template. Bring the issue to your team planning session for prioritization and scheduling. Mark the new issue as related to this one. -
Assignee: When applicable, create an issue in GitLab UI using the "Component" issue template to build or update the component code. Bring the issue to your team planning session for prioritization and scheduling. Mark the new issue as related to this one. -
Assignee: 🎉 Congrats, you made it! You can now close this issue.
Edited by Camellia X Yang