Last modified:

Use as the page footer, giving and linking users to important product and legal information.


<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

isSimplifiedbooleanfalseRenders a simplified version of the footer if true.
classNamestringundefinedAdditional CSS classes for styling.
copyrightInfostringCOPYRIGHTText or information displayed as the copyright notice.
menuItemsLeftBcFooterItemProps[]MENU_ITEMS_LEFTArray of menu items for the left side of the footer.
menuItemsRightBcFooterItemProps[] or nullMENU_ITEMS_RIGHTArray of menu items for the right side of the footer.

BcFooterItem Props

labelstringThe text label for the item.
urlstringThe URL for the item.


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.

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 &amp; Conditions</a></li>
      <li><a href="/">Privacy Policy</a></li>
    <ul class="bc-list bc-list--inline">
      <li><a href="/">Blog</a></li>
      <li><a href="/">Contact</a></li>
  <div class="bc-footer__copyright">
    <a href="">
      <span class="bc-footer__logo">
        <!-- Logo or image here -->
    <small>Copyright © 2014 – 2024 Bugcrowd, Inc. All rights reserved.</small>


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.

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.


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.


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: