# Footers ## Usage ### When to use this component? The footer component to be included on all pages of a website to provide users with essential navigation links, legal information. It serves as a consistent reference point, ensuring users can easily access key resources, such as privacy policies, terms of service, regardless of where they are on the site. ### How it works The footer is typically divided into three main sections: informational links, interactive elements, and branding. Informational links direct users to important pages like policies, help centers, and company details. Interactive elements may include social media icons, newsletter subscription forms, or customer support options. Branding reinforces the company’s identity with a logo, tagline, **and a mandatory copyright and last updated statement to ensure transparency and compliance**. ### Code {% tabs %} {% tab title="Vanilla Js" %} ```jsx ``` {% endtab %} {% tab title="React" %} ```jsx ``` {% endtab %} {% tab title="Vue" %} ```jsx ``` {% endtab %} {% tab title="Angular" %} ```jsx ``` {% endtab %} {% endtabs %} ### Properties | Property | Description | Type | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | `copyrightText` | The text shown at the bottom of the footer, typically containing copyright information. | `string` | | `description` | A brief text description that appears below the title, providing additional context or messaging. | `string` | | `footerSections` |

A JSON string representing an array of section objects, each containing a title and an array of links.

Example format:

jsonCopyEdit\[ |          |
| {                |                                                                                                                                                                                                                                               |          |

```
"title": "Resources",
"links": [
  { "label": "Docs", "href": "/docs" },
  { "label": "Support", "href": "/support" }
]
```

}
]

A JSON string representing an array of social media icons, each containing an href (link), src (image URL), and alt (alternative text).

Example format:

jsonCopyEdit\[
{ "href": "", "src": "/assets/facebook.svg", "alt": "Facebook" },
{ "href": "", "src": "/assets/twitter.svg", "alt": "Twitter" }
]

| `string` | ## Anatomy

**Logo Bar:** Logos are placed on both ends of the header. The **Government of Dubai logo** is positioned on the left, while the **Digital Dubai logo** is on the right, ensuring prominent branding and organizational representation. **Navigation Tabs:** A horizontal row of tabs located in the center, providing quick access to different sections of the platform. The **active tab** is visually highlighted to indicate the user’s current location. **Search:** A magnifying glass icon located in the interactive controls area, accompanied by placeholder text ("Search...") to enable quick content discovery. **Accessibility Icon:** An icon representing accessibility options, allowing users to adjust settings for better usability, such as increased font size or contrast. **Language Toggle:** A button labeled "العربية" to enable language switching between Arabic and English for bilingual support. **Login Button:** A circular icon with "Login" text, allowing users to authenticate and access personalized features or accounts. **Hamburger Icon:** A collapsible menu icon located on the far left, offering a compact navigation solution for smaller screens or alternative layouts. ## Responsive Behavior The header component turns to mobile view @ the 1024 breakpoint *** ## Dos and Don'ts | Dos | Don'ts | | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | The top center area is reserved for initiatives logos/banners. | Don't add any links to the logo bar center area. | | Always use a black shadow overlay on high-quality hero images for the transparent header. | Don't use bright, crowded, or low-quality hero images for the transparent header. | | Use high-quality logos in the logo bar. | Don't use low-quality logos, make sure to maintain the logo ratio, don't change the brand colors. | | All logos, links, and Icons should be in white color if a transparent header is used. | Don't Use colored logos, text, or icons on the transparent header. | --- # 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/footers.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.