Run any Skill in Manus with one click

ui-navbar-guidelines

Stars5

Forks1

UpdatedMarch 7, 2026 at 08:35

Standards and UX principles for modifying the desktop and mobile navigation bars. Use when asked to add, remove, or rearrange items in the header, or when tasked with saving horizontal space in the UI.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

kargig

kargig/divemap

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	ui-navbar-guidelines
description	Standards and UX principles for modifying the desktop and mobile navigation bars. Use when asked to add, remove, or rearrange items in the header, or when tasked with saving horizontal space in the UI.

Navbar UX Guidelines

This skill outlines the standard design principles and layout rules for modifying the main navigation bar in the Divemap project.

1. Do Not Merge Messages and Notifications

While both involve alerts, they serve entirely different user intents and must remain as separate, distinct icons on the top level of the UI.

Messages (MessageSquare): Synchronous, peer-to-peer communication. High urgency.
Notifications (Bell): Asynchronous system broadcasts (new sites, trips). Lower urgency.
Rule: Never merge these into a single "Inbox" dropdown. Both must be visible to display their respective unread badge counts (unreadChatCount and unreadCount).

2. Desktop Real Estate Optimization

The desktop navbar has limited horizontal space, especially for users on smaller laptops. If you need to add a new section, use these strategies to save space:

Consolidation (The "Explore" Pattern)

Group related secondary pages into overarching dropdown menus rather than placing them on the top level.

Example: "Dive Sites", "Dive Routes", "Diving Centers", and "Dive Trips" should all live under a single Dive / Explore (Compass icon) dropdown.

Icon-Only Actions

Action buttons on the right side of the navbar should rely exclusively on easily recognizable icons, completely removing text labels.

Rule: Use standard icons (Messages, Bell, Info, Profile Avatar, Logout).
Accessibility: You must include a descriptive title attribute (e.g., title="Logout") on the <button> or <Link> element so browsers display a tooltip on hover.

Logical Grouping & Dividers

Group core platform actions (Messages, Notifications).
Group user/system actions (Admin, Info, Profile).
The Logout Button: The Logout button must ALWAYS be the absolute right-most element in the navbar, visually separated from the rest of the navigation items.

3. Mobile Drawer Principles

The mobile navigation (hamburger menu) functions differently than the desktop view.

Rule 1: Avoid Redundancy: The top-level sticky header on mobile already contains the MessageSquare and Bell icons. Do not duplicate these links inside the slide-out drawer list, as it wastes space and causes confusion.
Rule 2: Grouping Match: The categorization inside the mobile accordion (Collapse components) should perfectly mirror the dropdown structure used on the desktop navbar (e.g., the "Dive / Explore" grouping).

More from this repository

same repository

mobile-first-design

kargig/divemap

Guidelines and patterns for implementing high-quality, "mobile-first" responsive user interfaces in the Divemap project using Tailwind CSS. Use this skill when designing or refactoring components and pages to ensure they are visually striking, functional, and touch-optimized on all devices.

2026-07-105

alembic-helper

kargig/divemap

Assists with Alembic database migrations in Python projects. Use when generating, applying, or debugging database schema migrations to ensure consistency and prevent conflicts.

2026-05-085

android-publisher

kargig/divemap

Workflow for building, testing, and publishing new Android app versions (PWA/TWA) using Bubblewrap to the Google Play Store. Use this when the user wants to build a new APK/AAB or release an update to Android.

2026-04-185

backend-testing

kargig/divemap

Mandatory standard operating procedure for running tests in the Divemap backend. Explicitly forbids direct pytest commands that cause data loss and explains SQLite incompatibility.

2026-04-015

xss-protection

kargig/divemap

Guidelines and workflows for detecting and fixing Cross-Site Scripting (XSS) vulnerabilities in frontend code. Use this skill when auditing frontend components, reviewing PRs with user-generated content, or investigating reported XSS issues.

2026-03-275

api-endpoint-testing

kargig/divemap

Standard procedure for testing authenticated FastAPI endpoints via curl in the CLI. Use this when verifying backend logic without a frontend, or when debugging authentication/permission issues.

2026-03-185

name	ui-navbar-guidelines
description	Standards and UX principles for modifying the desktop and mobile navigation bars. Use when asked to add, remove, or rearrange items in the header, or when tasked with saving horizontal space in the UI.

Navbar UX Guidelines

This skill outlines the standard design principles and layout rules for modifying the main navigation bar in the Divemap project.

1. Do Not Merge Messages and Notifications

While both involve alerts, they serve entirely different user intents and must remain as separate, distinct icons on the top level of the UI.

Messages (MessageSquare): Synchronous, peer-to-peer communication. High urgency.
Notifications (Bell): Asynchronous system broadcasts (new sites, trips). Lower urgency.
Rule: Never merge these into a single "Inbox" dropdown. Both must be visible to display their respective unread badge counts (unreadChatCount and unreadCount).

2. Desktop Real Estate Optimization

The desktop navbar has limited horizontal space, especially for users on smaller laptops. If you need to add a new section, use these strategies to save space:

Consolidation (The "Explore" Pattern)

Group related secondary pages into overarching dropdown menus rather than placing them on the top level.

Example: "Dive Sites", "Dive Routes", "Diving Centers", and "Dive Trips" should all live under a single Dive / Explore (Compass icon) dropdown.

Icon-Only Actions

Action buttons on the right side of the navbar should rely exclusively on easily recognizable icons, completely removing text labels.

Rule: Use standard icons (Messages, Bell, Info, Profile Avatar, Logout).
Accessibility: You must include a descriptive title attribute (e.g., title="Logout") on the <button> or <Link> element so browsers display a tooltip on hover.

Logical Grouping & Dividers

Group core platform actions (Messages, Notifications).
Group user/system actions (Admin, Info, Profile).
The Logout Button: The Logout button must ALWAYS be the absolute right-most element in the navbar, visually separated from the rest of the navigation items.

3. Mobile Drawer Principles

The mobile navigation (hamburger menu) functions differently than the desktop view.

Rule 1: Avoid Redundancy: The top-level sticky header on mobile already contains the MessageSquare and Bell icons. Do not duplicate these links inside the slide-out drawer list, as it wastes space and causes confusion.
Rule 2: Grouping Match: The categorization inside the mobile accordion (Collapse components) should perfectly mirror the dropdown structure used on the desktop navbar (e.g., the "Dive / Explore" grouping).