# Sticky Bar ## 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.

Including the website’s last updated date in the sticky bar is optional. You may refer to the example above if needed.

### Code {% tabs %} {% tab title="Vanilla Js" %} ```jsx ``` {% endtab %} {% tab title="React" %} ```jsx ``` {% endtab %} {% tab title="Vue" %} ```jsx ``` {% endtab %} {% tab title="Angular" %} 
<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"
    happiness-icon-click="console.log('Happiness icon clicked')"
    
    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"
    accessibility-icon-click="console.log('Suggestion AE icon clicked')"
    
    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"
    services-icon-click="console.log('Services icon clicked')"
    
    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"
    dubaiae-icon-on-click="console.log('Dubai AE icon clicked')"
    
    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"
    ai-icon-on-click="console.log('AI icon clicked')"
    
    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"
    chat-icon-on-click="console.log('Chat Icon clicked')"
    
    more-icon-family="material-icons"
    more-icon="more_horiz"
></dda-sticky-footer>
{% endtab %} {% endtabs %} ### Properties | Property | Description | Type | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | `happinessIconHref` | URL destination for the happiness icon link | `string` | | `happinessIconId` | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking. | `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` | | `happinessIconClick` | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs. | `string` | | `accessibilityIconHref` | URL destination for the accessibility icon link | `string` | | `accessibilityIconId` | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking. | `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` | | `accessibilityIconClick` | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs. | `string` | | `servicesIconHref` | URL destination for the services icon link | `string` | | `servicesIconId` | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking. | `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` | | `servicesIconClick` | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs. | `string` | | `hideMiddleSection` | To disable or enable the middle section inside the footer | `string` | | `middleLink` | 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` | | `rightLink` | 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. `title` This is a title attrubute. `RightLinkTooltip` This attribute is used to render a set of action links with icons and tooltips. | `string` | | `dubaiaeIconHref` | 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` | | `dubaiae-icon-tooltip` | | | | `dubaiae-icon-on-click` | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs. | `string` | | `aiIconHref` | URL destination for the AI icon link | `string` | | `ai-icon-id` | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking. | `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` | | `ai-icon-on-click` | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs. | `string` | | `chatIconHref` | URL destination for the chat icon link | `string` | | `chat-icon-id` | A unique HTML `id` assigned to the **Happiness** icon element. Used for DOM targeting, accessibility labels, or event tracking. | `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` | | `chat-icon-on-click` | JavaScript code to execute when the Happiness icon is clicked. Useful for triggering actions, analytics, or logs. | `string` | | `more-icon-family` | | | | `more-icon` | Able to change the more icon button | `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. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://designsystem.dubai.ae/components/sticky-bar.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.