Persona

Appearance

navigation Navigation ​

Usage ​

The navigation component is used to display the primary navigation in the sidebar or top bar of the frame of an platform. Navigation includes a list of links that user use to move between sections of the platform.

Type ​

Usage : Sidebar navigation menu is a list of primary menu that usualy used or have a high priority functions. This navigation is always shown, and the menu is static.
Usage : Navigation tab menu is a list of secondary menu that usually used as a sub menu of sidebar navigation. This menu usually flexible, and on each page can be different.
Usage: This type is a navigation bar usually for the after-login pages and is placed at the top of the screen in the desktop screen.
Usage: This type is a navigation bar usually for the landing pages and is placed at the top of the desktop screen.

Wide ​

Usage : Use this variant sidebar for more clear context of the menu, if the icon unfamiliar with the user.

Compact ​

Usage : Use this variant sidebar for more clear context of the menu, if the icon unfamiliar with the user.
Usage : Nav tab is a secondary navigation menu after side bar. It has 2 varian (Compact & Wide). The position of this nav tab can be place on right left, or top. It can be only icon, only text, icon with text.
Usage : Nav tab is a secondary navigation menu after side bar. It has 2 varian (Compact & Wide). The position of this nav tab can be place on right left, or top. At this variant the indicator of active tab using a line. It can be only icon, only text, icon with text.
Usage : Nav tab is a secondary navigation menu after side bar. It has 2 varian (Compact & Wide). The position of this nav tab can be place on right left, or top. At this variant the indicator of active tab using filled grey background. It can be only icon, only text, icon with text.
Usage: This type of navigation bar has two variants, the full desktop view, and the responsive mobile view. Each variant has 2 themes, light and dark.
Usage: This type of navigation bar has only one variant only. The mobile view as much as possible will have the look and layout of the native mobile apps

Pattern Rule ​

Best Practice ​

  • Contain primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.
  • Only use secondary actions for supplementary actions to the primary actions.
  • Provide a non-primary link or action as a secondary action to a section or an item.
  • Group navigation items into sections based on related categories.
  • Use a section title to clarify the category of a section.
  • Use a major icon for item actions.
  • Use a minor icon for secondary actions.
  • Use the provided navigation section component to group navigation items.

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital