Footer

<bh-footer> | BharatFooter

Footer component allows customizable branding sections with dynamic link columns or rows, suited for site footers.

Open in

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident molestiae

Home

Pricing

Docs

Privacy Policy

Terms of Service

Pricing Policy

Basic Usage

Preview

Open in

Lorem ipsum dolor sit amet.

HTML

<bh-footer brandingText="BharatUI">
    <p slot="brandingpara">Lorem ipsum dolor sit amet.</p>
</bh-footer>

React

import React from 'react';
import { BharatFooter } from 'bharat-ui/react/components/footer';

function App() {
  return (
    <BharatFooter brandingText="BharatUI">
      <p slot="brandingpara">Lorem ipsum dolor sit amet.</p>
    </BharatFooter>
  );
}

export default App;

Layout Modes

Use footerItems="column" with columnCount or footerItems="row" to control layout.

Preview

Open in

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident

Home

Pricing

Docs

About Us

Sponsor

Contact Us

Feedback

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident molestiae

Home

Pricing

Docs

Privacy Policy

Terms of Service

Pricing Policy

HTML

<bh-footer brandingText="BharatUI" footerItems="row" backgroundcolor="#060606">

        <p slot="brandingpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident</p>

        <bh-icon slot="links" name="discord" size="20px" color="#ffffff"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></bh-icon>

        <bh-icon name="github" slot="links" size="20px" color="#ffffff"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></bh-icon>

        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Home
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Pricing
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Docs
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            About Us
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Contact Us
        </bh-button>
          <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Sponsor
        </bh-button>
           <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Contact Us
        </bh-button>
           <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Feedback
        </bh-button>

</bh-footer>

<bh-footer brandingText="BharatUI" columnCount="2" backGroundColor="#060606">

        <p slot="brandingpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident molestiae</p>

        <bh-icon slot="links" name="discord" size="20px" color="#ffffff" class="icon"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></bh-icon>

        <bh-icon name="github" slot="links" size="20px" color="#ffffff" class="icon"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></bh-icon>

        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Home
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Pricing
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Docs
        </bh-button>

        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="coltwo" hover-color="gray">
            Privacy Policy
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="coltwo" hover-color="gray">
            Terms of Service
        </bh-button>
        <bh-button variant="link" size="medium" href="https://www.example.com/" color="white" slot="coltwo" hover-color="gray">
            Pricing Policy
        </bh-button>

  </bh-footer>

React

import React from 'react';
import { BharatFooter } from 'bharat-ui/react/components/footer'
import { BharatIcon } from 'bharat-ui/react/components/icon'
import { BharatButton } from 'bharat-ui/react/components/button'
function App() {
return (
  <>
  <BharatFooter brandingText="BharatUI" footerItems="row" backgroundcolor="#060606">

        <p slot="brandingpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident</p>

        <BharatIcon slot="links" name="discord" size="20px" color="#ffffff"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></BharatIcon>
        <BharatIcon name="github" slot="links" size="20px" color="#ffffff"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></BharatIcon>

        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Home
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Pricing
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Docs
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            About Us
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Contact Us
        </BharatButton>
          <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Sponsor
        </BharatButton>
           <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Contact Us
        </BharatButton>
           <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Feedback
        </BharatButton>

</BharatFooter>

<BharatFooter brandingText="BharatUI" columnCount="2" backGroundColor="#060606">

        <p slot="brandingpara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas qui distinctio ullam corporis provident molestiae</p>

        <BharatIcon slot="links" name="discord" size="20px" color="#ffffff" class="icon"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></BharatIcon>

        <BharatIcon name="github" slot="links" size="20px" color="#ffffff" class="icon"
            link="https://github.com/idreamfyrei/coming-soonUI/blob/main/README.md"></BharatIcon>

        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Home
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Pricing
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="colone" hover-color="gray">
            Docs
        </BharatButton>

        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="coltwo" hover-color="gray">
            Privacy Policy
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="coltwo" hover-color="gray">
            Terms of Service
        </BharatButton>
        <BharatButton variant="link" size="medium" href="https://www.example.com/" color="white" slot="coltwo" hover-color="gray">
            Pricing Policy
        </BharatButton>

  </BharatFooter>
  </>
);
}
export default App;

Column Count

Set columnCount to divide footer content into multiple slots.

Preview

Open in

Two column layout

HomePrivacy

HTML

<bh-footer brandingText="BharatUI" footerItems="column" columnCount="2">
  <p slot="brandingpara">Two column layout</p>
  <bh-button slot="colone">Home</bh-button>
  <bh-button slot="coltwo">Privacy</bh-button>
</bh-footer>

React

import React from 'react';
import { BharatFooter } from 'bharat-ui/react/components/footer';
import { BharatButton } from 'bharat-ui/react/components/button';

function App() {
return (
<>
<BharatFooter brandingText="BharatUI" footerItems="column" columnCount={2}>
    <p slot="brandingpara">Two column layout</p>
    <BharatButton slot="colone">Home</BharatButton>
    <BharatButton slot="coltwo">Privacy</BharatButton>
</BharatFooter>
</>
  );
}

export default App;

Named Slots

Slot Name	Description
colone	Align Footer link items inside column layout - column 1
coltwo	Align Footer link items inside column layout - column 2
brandingPara	Text slot below Branding
links	Social links

Properties

Property	Type	Description
brandingText	string	Text title for the branding section
brandingTextColor	string	Color of the branding text (brandingText)
brandingLogo	string	URL for branding image/logo
brandingDes	string	Branding description text (not used directly—use brandingpara slot)
brandingParaColor	string	Paragraph text color in branding section
footerItems	string	Layout mode: 'column' or 'row'
columnCount	number	Number of columns when using column layout
backgroundColor	string	Footer background color
borderRadius	string	CSS border radius
border	string	CSS border
borderImage	string	CSS border image
color	string	Global text color
size	string	Reserved size option (not currently affecting layout)
variant	string	Reserved variant option (e.g. dark, light)
width	string	Footer width
height	string	Footer height