Navigation Item

Navigation items are used in sidebars to help users navigate between different sections of the application. They should be used with the Neo Navbar component.

Home

State

Default

Home

Hover

Home

Active

Home

Icon

With Icon

Home

Without Icon

Home

Locked State

Locked (Click to see modal)

Tools

Locked (Forum)

Forum

The locked state shows a padlock icon on the right, indicating the feature is restricted to logged-in users or premium members. Clicking a locked item opens a modal for login or account creation.

Best practices

  • Use clear, concise labels that accurately describe the destination
  • Include icons to improve visual recognition and scannability
  • Maintain consistent styling and spacing between navigation items
  • Clearly indicate the active/current page with visual feedback
  • Use the locked state (padlock icon) to indicate restricted features for non-logged or non-premium users

Example Navigation

Locked Features

Do
  • Navigation items should:
    • Use consistent icon sizes (typically 20px)
    • Provide clear visual feedback for hover and active states
    • Be organized in a logical, predictable order
    • Use the padlock icon (locked state) to indicate features that require login or premium access

Right Icon (Custom)

Don't
  • Don't use navigation items without clear labels. Icons alone may not be sufficient for all users.
  • Don't mix different visual styles within the same navigation group.
  • The right icon slot is reserved primarily for the lock icon. Use custom right icons sparingly and only for notifications or count indicators.