Sticky Bar
A sticky bar is a fixed navigation element that provides continuous access to essential actions, links, or tools as users scroll through a page.
Last updated
A sticky bar is a fixed navigation element that provides continuous access to essential actions, links, or tools as users scroll through a page.
Last updated
Sticky bars are used to provide persistent access to key actions, notifications, or navigation options as users scroll through a page. They are ideal for pages with extensive content or long scrollable areas, ensuring critical elements remain accessible without interrupting the user’s workflow.
A sticky bar remains fixed at the top, bottom, or edge of the screen as users scroll through the content. It typically includes interactive elements like buttons, links, or icons that enable quick actions or navigation. Optional features such as collapsibility or auto-hide can be configured to enhance the user experience by maximizing screen space when the bar is not actively needed. The sticky bar can adapt to different screen sizes and layouts, maintaining usability across devices.
accessibilityIconAlt
Alternative text for the accessibility icon for accessibility
string
accessibilityIconHref
URL destination for the accessibility icon link
string
accessibilityIconSrc
Source URL for the accessibility icon image
string
accessibilityIconTooltip
Tooltip text that appears when hovering over the accessibility icon
string
aiIconAlt
Alternative text for the AI icon for accessibility
string
aiIconHref
URL destination for the AI icon link
string
aiIconSrc
Source URL for the AI icon image
string
aiIconTooltip
Tooltip text that appears when hovering over the AI icon
string
chatIconAlt
Alternative text for the chat icon for accessibility
string
chatIconHref
URL destination for the chat icon link
string
chatIconSrc
Source URL for the chat icon image
string
chatIconTooltip
Tooltip text that appears when hovering over the chat icon
string
firstLogoAlt
Alternative text for the first logo for accessibility
string
firstLogoHref
URL destination for the first logo link
string
firstLogoSrc
Source URL for the first logo image
string
firstLogoTooltip
Tooltip text that appears when hovering over the first logo
string
happinessIconAlt
Alternative text for the happiness icon for
string
happinessIconHref
URL destination for the happiness icon link
string
happinessIconSrc
Source URL for the happiness icon image
string
happinessIconTooltip
Tooltip text that appears when hovering over the happiness icon
string
locationButtonHref
URL destination for the location button link
string
locationButtonIcon
Icon name/class to be displayed at the start of the location button
string
locationButtonText
Text label displayed on the location button
string
newsButtonHref
URL destination for the news button link
string
newsButtonIcon
Icon name/class to be displayed at the start of the news button
string
newsButtonText
Text label displayed on the news button
string
secondLogoAlt
Alternative text for the second logo for accessibility
string
secondLogoHref
URL destination for the second logo link
string
secondLogoSrc
Source URL for the second logo image
string
secondLogoTooltip
Tooltip text that appears when hovering over the second logo
string
servicesIconAlt
Alternative text for the services icon for accessibility
string
servicesIconHref
URL destination for the services icon link
string
servicesIconSrc
Source URL for the services icon image
string
servicesIconText
Optional text label displayed below the services icon
string
servicesIconTooltip
Tooltip text that appears when hovering over the services icon
string
thirdLogoAlt
Alternative text for the third logo for accessibility
string
thirdLogoHref
URL destination for the third logo link
string
thirdLogoSrc
Source URL for the third logo image
string
thirdLogoTooltip
Tooltip text that appears when hovering over the third logo
string
Divider Lines: Thin vertical lines used to visually separate sections and group related elements, enhancing clarity and organization.
Services Icon and Label: A grid icon paired with a "Services" label, providing a direct link to a centralized service hub.
Shotcuts: A sequence of links provides easy access, redirecting users to pages based on the content and the selected link.
Navigation Links:
Locations: A pin icon with the "Locations" label for accessing physical locations or map-related services.
Newsroom: A document icon with the "Newsroom" label, linking to news or updates.
Contact Us: A mail icon paired with "Contact Us," offering a way to connect with support or service teams.
Chat Icon: A speech bubble icon for initiating live chat or accessing FAQs.
External Links and Tools:
Dubai.ae: A text link for accessing the main government portal.
DubaAI Icon: A circular icon with "AI," likely linking to artificial intelligence-based services or tools.
04 - Voice of customer: A unified platform for Dubai entities to connect with customers and gather their feedback (suggestions, complaints, comments).
Happiness Meter: Representing user satisfaction or feedback, providing quick access to a feedback feature.
The stickybar component turns to mobile view @ the 1024 breakpoint
Use step indicators to guide users through multi-step processes.
Don't use step indicators for single-step processes.
Label each step clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for steps.
Ensure step indicators are large enough to be easily noticeable.
Don't make step indicators too small or difficult to see.
Provide visual feedback to indicate the current, completed, and upcoming steps.
Don't leave users guessing which step they are on.
Use consistent styling and spacing across all step indicators in the application.
Don't use inconsistent styles that may confuse users.
Update the step indicator in real-time as the user progresses through the steps.
Don't use step indicators if you cannot provide real-time updates.
