Footer - Domma Showcase

Features

Three Layouts

Simple horizontal, multi-column grid, or minimal centered layouts.

Fully Responsive

Mobile-first design adapts seamlessly to all screen sizes.

Social Icons

Integrated social media links with Domma icon system.

Theme Variants

Light, dark, and transparent themes with automatic color adaptation.

Getting Started

Add a footer to your page in three simple steps

Step 1: Add HTML Container

Add a <footer> element to your page, typically at the bottom:


<body>
    <main class="content">
        <!-- Your page content -->
    </main>

    <footer id="site-footer"></footer>
</body>

Step 2: Include Domma

Add Domma CSS and JavaScript to your page:


<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

<!-- JavaScript -->
<script src="dist/domma.min.js"></script>

Step 3: Initialize the Footer

Call Domma.elements.footer() with your content:


Domma.elements.footer('#site-footer', {
    layout: 'simple',
    brand: { text: 'My Site' },
    links: [
        { text: 'About', url: '/about' },
        { text: 'Contact', url: '/contact' }
    ],
    copyright: '© 2026 My Site'
});

Note: The footer component will automatically generate all HTML structure, styling, and layout. You only need to provide the empty container element and configuration options.

Simple Layout

Horizontal footer with brand, links, social icons, and copyright

Main Content

Simple layout is perfect for landing pages and marketing sites.

JavaScript


Domma.elements.footer('#footer', {
    layout: 'simple',
    variant: 'light',
    brand: {
        text: 'Domma',
        logo: '/assets/logo.svg',
        url: '/'
    },
    links: [
        { text: 'Features', url: '/features' },
        { text: 'Pricing', url: '/pricing' },
        { text: 'About', url: '/about' },
        { text: 'Contact', url: '/contact' }
    ],
    social: [
        { icon: 'github', url: 'https://github.com', label: 'GitHub' },
        { icon: 'twitter', url: 'https://twitter.com', label: 'Twitter' }
    ],
    copyright: '© 2026 Domma. All rights reserved.'
});

Columns Layout

Multi-column grid with organized link sections

Main Content

Columns layout is ideal for comprehensive footers with many links.

JavaScript


Domma.elements.footer('#footer', {
    layout: 'columns',
    variant: 'dark',
    brand: {
        text: 'Domma Framework',
        logo: '/assets/logo.svg'
    },
    columns: [
        {
            title: 'Product',
            links: [
                { text: 'Features', url: '/features' },
                { text: 'Pricing', url: '/pricing' },
                { text: 'Changelog', url: '/changelog' }
            ]
        },
        {
            title: 'Resources',
            links: [
                { text: 'Documentation', url: '/docs' },
                { text: 'API Reference', url: '/api' },
                { text: 'Examples', url: '/examples' }
            ]
        },
        {
            title: 'Company',
            links: [
                { text: 'About', url: '/about' },
                { text: 'Blog', url: '/blog' },
                { text: 'Contact', url: '/contact' }
            ]
        }
    ],
    social: [
        { icon: 'github', url: '#', label: 'GitHub' },
        { icon: 'twitter', url: '#', label: 'Twitter' }
    ],
    copyright: '© 2026 Domma. All rights reserved.'
});

Minimal Layout

Centered minimal footer with copyright and social links

Main Content

Minimal layout is perfect for clean, simple pages.

JavaScript


Domma.elements.footer('#footer', {
    layout: 'minimal',
    variant: 'light',
    copyright: '© 2026 Domma',
    social: [
        { icon: 'github', url: '#', label: 'GitHub' },
        { icon: 'twitter', url: '#', label: 'Twitter' },
        { icon: 'linkedin', url: '#', label: 'LinkedIn' }
    ]
});

Dark Theme Variant

Footer with dark background

Main Content

Dark variant works great with light-themed pages.

JavaScript


Domma.elements.footer('#footer', {
    variant: 'dark',  // 'light', 'dark', or 'transparent'
    layout: 'simple',
    // ... other options
});

API Reference

Options

Option	Type	Default	Description
`variant`	String	'light'	'light', 'dark', or 'transparent'
`layout`	String	'simple'	'simple', 'columns', or 'minimal'
`brand`	Object	null	{ text, logo, url }
`columns`	Array	[]	Multi-column layout
`links`	Array	[]	Simple link list
`social`	Array	[]	Social media icons
`copyright`	String/Object	null	Copyright text or {text, year}
`position`	String	'static'	'static', 'fixed', or 'sticky'

Methods

Method	Description
`setBrand(brand)`	Update brand information
`setLinks(links)`	Update links array
`setColumns(columns)`	Update columns array
`setSocial(social)`	Update social links
`setCopyright(copyright)`	Update copyright text

Configuration Engine Integration

Use $.setup() for declarative initialization


$.setup({
    '#site-footer': {
        component: 'footer',
        options: {
            layout: 'columns',
            variant: 'dark',
            brand: { text: 'My App', logo: '/logo.svg' },
            columns: [/* ... */],
            copyright: '© 2026 My App'
        }
    }
});