Footer

Responsive footer components for page bottom sections

Basic

Basic Footer

Preview Code Auto

Footer(
    Nav(
        H6('Services', cls='footer-title'),
        Button('Branding', cls='link link-hover'),
        Button('Design', cls='link link-hover'),
        Button('Marketing', cls='link link-hover'),
        Button('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        Button('About us', cls='link link-hover'),
        Button('Contact', cls='link link-hover'),
        Button('Jobs', cls='link link-hover'),
        Button('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        Button('Terms of use', cls='link link-hover'),
        Button('Privacy policy', cls='link link-hover'),
        Button('Cookie policy', cls='link link-hover')
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content p-10'
)

Logos in Footer

Preview Code Auto

Footer(
        Aside(
            Icon.hashtag(cls="w-[50px] h-[50px]"),
            P(
                'ACME Industries Ltd.',
                Br(),
                'Providing reliable tech since 1992'
            )
        ),
        Nav(
            H6('Services', cls='footer-title'),
            A('Branding', cls='link link-hover'),
            A('Design', cls='link link-hover'),
            A('Marketing', cls='link link-hover'),
            A('Advertisement', cls='link link-hover')
        ),
        Nav(
            H6('Company', cls='footer-title'),
            A('About us', cls='link link-hover'),
            A('Contact', cls='link link-hover'),
            A('Jobs', cls='link link-hover'),
            A('Press kit', cls='link link-hover')
        ),
        Nav(
            H6('Legal', cls='footer-title'),
            A('Terms of use', cls='link link-hover'),
            A('Privacy policy', cls='link link-hover'),
            A('Cookie policy', cls='link link-hover')
        ),
        cls='footer sm:footer-horizontal bg-base-200 text-base-content p-10'
    )

Form Footer

Preview Code Auto

Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        A('Terms of use', cls='link link-hover'),
        A('Privacy policy', cls='link link-hover'),
        A('Cookie policy', cls='link link-hover')
    ),
    Form(
        H6('Newsletter', cls='footer-title'),
        Fieldset(
            Label('Enter your email address'),
            Div(
                Input(type='text', placeholder='[email protected]', cls='input join-item'),
                Button('Subscribe', cls='btn btn-primary join-item'),
                cls='join'
            ),
            cls='w-80'
        )
    ),
    cls='footer sm:footer-horizontal bg-base-200 text-base-content p-10'
)

Preview Code Auto

Footer(
    Aside(
        Icon.hashtag(cls="w-[50px] h-[50px]"),
        P(
            'ACME Industries Ltd.',
            Br(),
            'Providing reliable tech since 1992'
        )
    ),
    Nav(
        H6('Social', cls='footer-title'),
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),
            cls='grid grid-flow-col gap-4'
        )
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content p-10'
)

Preview Code Auto

year = datetime.now().year

Footer(
    Aside(
        Icon.hashtag(cls="w-[36px] h-[36px]"),
        P(f'Copyright © {year} - All right reserved'),
        cls='grid-flow-col items-center'
    ),
    Nav(
        A(Icon.twitter()),
        A(Icon.youtube()),
        A(Icon.facebook()),
        cls='grid-flow-col gap-4 md:place-self-center md:justify-self-end'
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content items-center p-4'
)

Preview Code Auto

Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Social', cls='footer-title'),
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),
            cls='grid grid-flow-col gap-4'
        )
    ),
    cls='footer sm:footer-horizontal bg-base-300 text-base-content p-10'
)

Complex

Two Row Footer

Preview Code Auto

Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        A('Terms of use', cls='link link-hover'),
        A('Privacy policy', cls='link link-hover'),
        A('Cookie policy', cls='link link-hover')
    ),
    Nav(
        H6('Social', cls='footer-title'),
        A('Twitter', cls='link link-hover'),
        A('Instagram', cls='link link-hover'),
        A('Facebook', cls='link link-hover'),
        A('Github', cls='link link-hover')
    ),
    Nav(
        H6('Explore', cls='footer-title'),
        A('Features', cls='link link-hover'),
        A('Enterprise', cls='link link-hover'),
        A('Security', cls='link link-hover'),
        A('Pricing', cls='link link-hover')
    ),
    Nav(
        H6('Apps', cls='footer-title'),
        A('Mac', cls='link link-hover'),
        A('Windows', cls='link link-hover'),
        A('iPhone', cls='link link-hover'),
        A('Android', cls='link link-hover')
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content grid-rows-2 p-10'
)

Centered Logo Footer

Preview Code Auto

Footer(
    Aside(
            Icon.hashtag(cls='w-[50px] h-[50px]'),
        P(
            'ACME Industries Ltd.',
            Br(),
            'Providing reliable tech since 1992',
            cls='font-bold'
        ),
        P(f'Copyright © {year} - All right reserved')
    ),
    Nav(
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),
            cls='grid grid-flow-col gap-4'
        )
    ),
    cls='footer footer-horizontal footer-center bg-primary text-primary-content p-10'
)

Preview Code Auto

Footer(
    Nav(
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover'),
        cls='grid grid-flow-col gap-4'
    ),
    Nav(
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),
            cls='grid grid-flow-col gap-4'
        )
    ),
    Aside(
        P(f'Copyright © {year} - All right reserved by ACME Industries Ltd')
    ),
    cls='footer footer-horizontal footer-center bg-base-200 text-base-content rounded p-10'
)

Double Footer

Preview Code Auto

Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        A('Terms of use', cls='link link-hover'),
        A('Privacy policy', cls='link link-hover'),
        A('Cookie policy', cls='link link-hover')
    ),
    cls='footer sm:footer-horizontal bg-base-200 text-base-content p-10'
),
Footer(
    Aside(
        Icon.hashtag(cls='w-[24px] h-[24px]'),
        P(
            'ACME Industries Ltd.',
            Br(),
            'Providing reliable tech since 1992'
        ),
        cls='items-center grid-flow-col'
    ),
    Nav(
        Div(
            Button(Icon.twitter()),
            Button(Icon.facebook()),
            Button(Icon.youtube()),
            cls='grid grid-flow-col gap-4'
        ),
        cls='md:place-self-center md:justify-self-end'
    ),
    cls='footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4'
)

Class Reference

Class	Type	Description
footer	Component	Base container class
footer-title	Part	Section heading style
footer-center	Placement	Aligns footer content to center
footer-horizontal	direction	Puts footer columns next to each other horizontally
footer-vertical	direction	Puts footer columns under each other vertically [Default]

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo

Footer

Basic

Basic Footer

Logos in Footer

Form Footer

Footer with Logo and Social Icons

Logo-Copyright-Social Footer

Links Social Footer

Complex

Two Row Footer

Centered Logo Footer

Centered Social Footer

Double Footer

Class Reference