mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
121 lines
4.7 KiB
YAML
121 lines
4.7 KiB
YAML
name: Global Header
|
|
description: The primary navigation header that appears at the top of the application, providing access to global navigation,
|
|
search, notifications, and user account functions.
|
|
category: Navigation
|
|
slds_classes:
|
|
root: slds-global-header
|
|
elements:
|
|
- class: slds-global-header__logo
|
|
description: Container for application logo or brand
|
|
purpose: Displays the primary brand identity
|
|
- class: slds-global-header__item
|
|
description: Individual navigation item wrapper
|
|
purpose: Wraps each navigation element
|
|
modifiers: []
|
|
states:
|
|
- class: slds-is-active
|
|
description: Active navigation item state
|
|
trigger: Applied to currently selected navigation item
|
|
- class: slds-has-notification
|
|
description: Notification indicator state
|
|
trigger: Applied when notifications are present
|
|
variants:
|
|
- name: Base
|
|
description: Standard global header with full navigation
|
|
classes:
|
|
- slds-global-header
|
|
usage_context: Default implementation for application header
|
|
differences: Full-featured header with logo, navigation, and user controls
|
|
- name: Minimal
|
|
description: Minimal global header with essential elements only
|
|
classes:
|
|
- slds-global-header
|
|
usage_context: Simplified header for focused experiences
|
|
differences: Reduced elements focusing on core navigation
|
|
lightning_component:
|
|
name: No direct component
|
|
url: https://developer.salesforce.com/docs/component-library/overview/components
|
|
mapping_notes: No direct Lightning Base Component equivalent - typically implemented using lightning-layout and custom components
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab navigation through header elements
|
|
- Enter/Space to activate navigation items
|
|
- Arrow keys for dropdown navigation
|
|
- Escape to close open menus
|
|
screen_reader:
|
|
- Header landmark identified
|
|
- Navigation structure announced
|
|
- User account information communicated
|
|
- Notification status indicated
|
|
aria_attributes:
|
|
- role='banner' for header landmark
|
|
- role='navigation' for nav sections
|
|
- aria-label for navigation areas
|
|
- aria-expanded for dropdown menus
|
|
- aria-current for active navigation
|
|
- aria-live for notification updates
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- As the primary application header
|
|
- For global navigation and branding
|
|
- When users need access to account functions
|
|
- For consistent cross-application navigation
|
|
when_not_to_use:
|
|
- For page-specific headers (use page headers instead)
|
|
- In embedded or widget contexts
|
|
- When space is extremely limited
|
|
best_practices:
|
|
- Keep navigation items concise and clear
|
|
- Prioritize most important functions
|
|
- Provide clear visual hierarchy
|
|
- Ensure responsive behavior across devices
|
|
- Maintain consistent branding
|
|
common_mistakes:
|
|
- Overcrowding with too many navigation items
|
|
- Poor mobile responsive behavior
|
|
- Inconsistent styling across applications
|
|
- Missing accessibility landmarks
|
|
code_examples:
|
|
- title: Basic Global Header
|
|
description: Simplified global header with essential elements
|
|
code: "<header class=\"slds-global-header\" role=\"banner\">\n <div class=\"slds-global-header__logo\">\n <a\
|
|
\ href=\"#\" class=\"\">\n <img src=\"/assets/images/logo-minimal.svg\" alt=\"Logo\" class=\"\">\n </a>\n\
|
|
\ </div>\n <nav class=\"\" role=\"navigation\" aria-label=\"Primary\">\n <ul class=\"\">\n <li\
|
|
\ class=\"slds-global-header__item\">\n <a href=\"#\" class=\"slds-is-active\">Dashboard</a>\n </li>\n\
|
|
\ <li class=\"slds-global-header__item\">\n <a href=\"#\" class=\"\">Reports</a>\n </li>\n\
|
|
\ </ul>\n </nav>\n <div class=\"\">\n <span class=\"slds-avatar slds-avatar_circle slds-avatar_small\"\
|
|
>\n <img alt=\"User\" src=\"/assets/images/avatar.jpg\">\n </span>\n </div>\n </header>\n"
|
|
dependencies:
|
|
css_files:
|
|
- global-header.css
|
|
- avatar.css
|
|
- button.css
|
|
- input.css
|
|
javascript:
|
|
- global-header.js
|
|
icons:
|
|
- utility-sprite.svg
|
|
- standard-sprite.svg
|
|
other_components:
|
|
- avatar
|
|
- button
|
|
- input
|
|
- notification
|
|
related_components:
|
|
- name: Global Navigation
|
|
relationship: similar
|
|
description: Similar global navigation concept
|
|
- name: Page Headers
|
|
relationship: alternative
|
|
description: Alternative header for page-specific content
|
|
- name: App Launcher
|
|
relationship: depends-on
|
|
description: Often launched from global header
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/global-header/
|
|
metadata:
|
|
version: 1.0.0
|
|
last_updated: '2025-11-12'
|
|
review_status: complete
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|