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.

Overview

Usage

When to use this component?

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.

How it works

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.

Code

<dda-sticky-footer
    happiness-icon-href="#"
    happiness-icon-id="Happiness"
    happiness-icon-src="static/media/public_images/icn-happy.svg"
    happiness-icon-alt="Happiness"
    happiness-icon-tooltip="Happiness"
    accessibility-icon-href="#"
    accessibility-icon-id="uggestionsComplaints"
    accessibility-icon-src="static/media/public_images/icn-complaints.svg"
    accessibility-icon-alt="Suggestions and complaints"
    accessibility-icon-tooltip="Suggestions &amp; complaints"
    services-icon-href="#"
    services-icon-id="footerServices"
    services-icon-src="static/media/public_images/icn-grid-view.svg"
    services-icon-alt="Services"
    services-icon-tooltip="Services"
    services-icon-text="Services"
    hide-middle-section="false"
    middle-link='[{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"},{"LogoTooltip":"Middlelink","href":"#","src":"static/media/public_images/digital-logo.svg","alt":"DDA"}]'
    right-link='[{"RightLinkTooltip":"Survey","href":"#","title":"Survey","itemId":"itemID","ariaLabel":"Survey","LinkText":"Survey","IconFamily":"material-icons","IconName":"poll"},{"RightLinkTooltip":"Locations","href":"#","title":"Locations","itemId":"itemID","ariaLabel":"Locations","LinkText":"Locations","IconFamily":"material-icons","IconName":"location_on"},{"RightLinkTooltip":"News Room","href":"#","title":"News Room","itemId":"itemID","ariaLabel":"News Room","LinkText":"News Room","IconFamily":"material-icons","IconName":"feed"},{"RightLinkTooltip":"Contact Us","href":"#","title":"Contact Us","itemId":"itemID","ariaLabel":"Contact Us","LinkText":"Contact Us","IconFamily":"material-icons","IconName":"mail"}]'
    dubaiae-icon-href="javascript:void(0)"
    dubaiae-icon-id="dubaiAEID"
    dubaiae-icon-src="static/media/public_images/DubaiAE.svg"
    dubaiae-icon-small-src="static/media/public_images/DdiabiAE-icon.svg"
    dubaiae-icon-alt="dubai.ae"
    dubaiae-icon-tooltip="dubai.ae"
    ai-icon-href="javascript:void(0)"
    ai-icon-id="aiIconID"
    ai-icon-src="static/media/public_images/DubaiAI.svg"
    ai-icon-alt="Digital AI"
    ai-icon-tooltip="Digital AI"
    chat-icon-href="javascript:void(0)"
    chat-icon-id="chatID"
    chat-icon-src="static/media/public_images/icn-chat_bubble_outline.svg"
    chat-icon-alt="Online Chat"
    chat-icon-tooltip="Online Chat"
    more-icon="more_horiz"
></dda-sticky-footer>

Properties

Property
Description
Type

happinessIconHref

URL destination for the happiness icon link

string

happinessIconSrc

Source URL for the happiness icon image

string

happinessIconAlt

Alternative text for the happiness icon for

string

happinessIconTooltip

Tooltip text that appears when hovering over the happiness icon

string

accessibilityIconHref

URL destination for the accessibility icon link

string

accessibilityIconSrc

Source URL for the accessibility icon image

string

accessibilityIconAlt

Alternative text for the accessibility icon for accessibility

string

accessibilityIconTooltip

Tooltip text that appears when hovering over the accessibility icon

string

servicesIconHref

URL destination for the services icon link

string

servicesIconSrc

Source URL for the services icon image

string

servicesIconAlt

Alternative text for the services icon for accessibility

string

servicesIconTooltip

Tooltip text that appears when hovering over the services icon

string

servicesIconText

Optional text label displayed below the services icon

string

hide-middle-section

To disable or enable the middle section inside the footer

string

middle-link

An array of link objects displayed in the middle section of the component. Each object contains properties such as LogoTooltip for the tooltip text, href for the link destination, src for the logo image source, and alt for alternative text. This attribute is used to dynamically render a set of clickable logo links.

string

right-link

An array of link objects displayed in the right section of the component. Each object includes properties such as RightLinkTooltip for tooltip text, href for the link URL, alt for accessibility text, LinkText for the visible label, and icon-related properties like IconFamily and IconName to define the icon appearance. This attribute is used to render a set of action links with icons and tooltips.

string

aiIconHref

URL destination for the AI icon link

string

aiIconSrc

Source URL for the AI icon image

string

aiIconAlt

Alternative text for the AI icon for accessibility

string

aiIconTooltip

Tooltip text that appears when hovering over the AI icon

string

chatIconHref

URL destination for the chat icon link

string

chatIconSrc

Source URL for the chat icon image

string

chatIconAlt

Alternative text for the chat icon for accessibility

string

chatIconTooltip

Tooltip text that appears when hovering over the chat icon

string

more-icon

Able to change the more icon button

string

dubaiae-icon-href

URL or link the DubaiAE icon should redirect to when clicked.

string

dubaiae-icon-id

Unique ID for the DubaiAE icon (useful for DOM access or tracking).

string

dubaiae-icon-src

Source path for the main DubaiAE icon image.

string

dubaiae-icon-small-src

Source path for the small version of the DubaiAE icon (for responsive usage).

string

dubaiae-icon-alt

Alternate text for the DubaiAE icon (for accessibility and SEO).

string

Anatomy

Anatomy Options

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:

  1. Locations: A pin icon with the "Locations" label for accessing physical locations or map-related services.

  2. Newsroom: A document icon with the "Newsroom" label, linking to news or updates.

  3. Contact Us: A mail icon paired with "Contact Us," offering a way to connect with support or service teams.

  4. Chat Icon: A speech bubble icon for initiating live chat or accessing FAQs.

External Links and Tools:

  1. Dubai.ae: A text link for accessing the main government portal.

  2. DubaAI Icon: A circular icon with "AI," likely linking to artificial intelligence-based services or tools.

  3. 04 - Voice of customer: A unified platform for Dubai entities to connect with customers and gather their feedback (suggestions, complaints, comments).

  4. Happiness Meter: Representing user satisfaction or feedback, providing quick access to a feedback feature.

Responsive Behavior

The stickybar component turns to mobile view @ the 1024 breakpoint

Dos and Don'ts

Dos
Don'ts

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.

PreviousVertical StepperNextTabs

Last updated