Variants
Example of Footer - default
<BcFooter />
React documentation
Last modified:
The BcFooter component renders a customizable footer section. It supports a simplified version for minimalistic designs and allows for custom menu items and styling.
To use BcFooter in a view, import it as usual:
import { BcFooter } frfrom '@bugcrowd/bc-elements'
BcFooter Props
| Name | Type | Default | Description |
|---|---|---|---|
isSimplified | boolean | false | Renders a simplified version of the footer if true. |
className | string | undefined | Additional CSS classes for styling. |
copyrightInfo | string | COPYRIGHT | Text or information displayed as the copyright notice. |
menuItemsLeft | BcFooterItemProps[] | MENU_ITEMS_LEFT | Array of menu items for the left side of the footer. |
menuItemsRight | BcFooterItemProps[] or null | MENU_ITEMS_RIGHT | Array of menu items for the right side of the footer. |
BcFooterItem Props
| Name | Type | Description |
|---|---|---|
label | string | The text label for the item. |
url | string | The URL for the item. |
HTML
Last modified:
The footer’s semantic structure is:
<footer>landmark- This particular
<footer>should be a child of the<body>and the semantic sibling to the<header>and<main>of the body, occurring after the<main>. <nav>to wrap the list of links<ul>and<li>unsorted list and list items to structure the footer links<a>anchors/links
<small>for copyright legalese.
- This particular
The resulting HTML looks like this:
<footer class="bc-footer container">
<nav class="bc-footer__nav" aria-label="Footer navigation">
<ul class="bc-list bc-list--inline">
<li><a href="/">Terms & Conditions</a></li>
<li><a href="/">Privacy Policy</a></li>
</ul>
<ul class="bc-list bc-list--inline">
<li><a href="/">Blog</a></li>
<li><a href="/">Contact</a></li>
</ul>
</nav>
<div class="bc-footer__copyright">
<a href="https://www.bugcrowd.com">
<span class="bc-footer__logo">
<!-- Logo or image here -->
</span>
</a>
<small>Copyright © 2014 – 2024 Bugcrowd, Inc. All rights reserved.</small>
</div>
</footer>
Design
Last modified:
The Footer’s design is kept simple. It supports:
- Up to 2 sets of links
- A logo
- Legalese such as copyright.
A simplified variant optionally reduces the links to a single list and omits the logo.
The 2 sets of links are pre-populated with defaults and can be customized.
Responsive design
The Footer uses a simple responsive Flexbox setup to scale from small to large viewports. It gracefully overflows and stacks vertically at small viewports.
Adding custom links
Write short but clear links.
ℹ️ For tips and examples use the Tone & Language guide — it’s got a dedicated Writing good links section.
Avoid overloading the footer with too many links or elements. This overwhelms users and detracts from the footer’s navigational utility.
We recommend no more than 4 to 6 links per list for usability and aesthetic appeal.
Accessibility
Last modified:
The Footer must use semantic HTML (<footer>, <nav>, <ul>, <li>, <a>) as they provide inherent roles and landmarks that assistive technologies rely on to convey information about the structure and purpose of the content.
For details see the HTML section above.
Use ARIA landmarks and labels where necessary to enhance the screen reader experience. For example, adding aria-label="Footer navigation" to the Footer’s <nav> to differentiate it from other <nav>s.
Rationale
Last modified:
Footers are a common, well-recognised pattern used in documents, web pages, and even web applications.
Footers mark the end of the current page or scrollable area of the viewport.
The Footer’s design supports users in their expectation of finding important information in footer regions, including:
- statements of ownership
- copyright, licensing, and terms of use legalese
- and a mix of both primary and supplemental links.
See also
Last modified: