Footer | UI Showcase
WRNexus UI
Layout component

Footer

Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.

8 props4 slots2 outputsTheme readyResponsive
Interactive playground

Configure Footer

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Footer
  label="Footer"
  items='[
    {
      "id": "footer-0-1",
      "key": "footer-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#footer-demo",
      "actionHref": "#footer-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "footer-0-2",
      "key": "footer-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#footer-demo",
      "actionHref": "#footer-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'>
  <div data-slot="pre-footer">
    <div class="showcase-slot">pre-footer slot</div>
  </div>
  <div data-slot="post-footer">
    <div class="showcase-slot">post-footer slot</div>
  </div>
  <div data-slot="copyright-left">
    <div class="showcase-slot">copyright-left slot</div>
  </div>
  <div data-slot="copyright-right">
    <div class="showcase-slot">copyright-right slot</div>
  </div>
</Footer>
Event outputInteract with the preview to inspect the typed payload.
Component props8 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Four-column public footer

Organize product, developer, resource, and company links into responsive columns.

01
Live preview
Component usage.wrn
<Footer
  label="Footer"
  items='[
    {
      "type": "header",
      "label": "Product",
      "description": "Build consistent interfaces with WRNexusJS.",
      "items": [
        {
          "label": "Components",
          "href": "/base"
        },
        {
          "label": "Themes",
          "href": "/themes"
        },
        {
          "label": "Examples",
          "href": "/blocks"
        }
      ]
    },
    {
      "type": "header",
      "label": "Developers",
      "items": [
        {
          "label": "Documentation",
          "href": "/docs"
        },
        {
          "label": "Installation",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ]
    },
    {
      "type": "header",
      "label": "Resources",
      "items": [
        {
          "label": "Accessibility",
          "href": "/accessibility"
        },
        {
          "label": "Design tokens",
          "href": "/colors"
        },
        {
          "label": "Typography",
          "href": "/fonts"
        }
      ]
    },
    {
      "type": "header",
      "label": "Company",
      "items": [
        {
          "label": "WorkRoot",
          "href": "https://workroot.in",
          "external": true
        },
        {
          "label": "WRNexusJS",
          "href": "https://wrnexusjs.dev",
          "external": true
        }
      ]
    }
  ]'
  columns="4"
  maxWidth="wide"
  copyright="© 2026 WRNexusJS. All rights reserved.">
  <div data-slot="pre-footer">
    <div class="showcase-slot">pre-footer slot</div>
  </div>
  <div data-slot="post-footer">
    <div class="showcase-slot">post-footer slot</div>
  </div>
  <div data-slot="copyright-left">
    <div class="showcase-slot">copyright-left slot</div>
  </div>
  <div data-slot="copyright-right">
    <div class="showcase-slot">copyright-right slot</div>
  </div>
</Footer>
Compact

Compact application footer

Use fewer columns and reduced spacing inside product applications.

02
Live preview
Component usage.wrn
<Footer
  size="compact"
  label="Compact example"
  items='[
    {
      "type": "header",
      "label": "Product",
      "description": "Build consistent interfaces with WRNexusJS.",
      "items": [
        {
          "label": "Components",
          "href": "/base"
        },
        {
          "label": "Themes",
          "href": "/themes"
        },
        {
          "label": "Examples",
          "href": "/blocks"
        }
      ]
    },
    {
      "type": "header",
      "label": "Developers",
      "items": [
        {
          "label": "Documentation",
          "href": "/docs"
        },
        {
          "label": "Installation",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ]
    },
    {
      "type": "header",
      "label": "Resources",
      "items": [
        {
          "label": "Accessibility",
          "href": "/accessibility"
        },
        {
          "label": "Design tokens",
          "href": "/colors"
        },
        {
          "label": "Typography",
          "href": "/fonts"
        }
      ]
    }
  ]'
  copyright="WRNexusJS component showcase">
  <div data-slot="pre-footer">
    <div class="showcase-slot">pre-footer slot</div>
  </div>
  <div data-slot="post-footer">
    <div class="showcase-slot">post-footer slot</div>
  </div>
  <div data-slot="copyright-left">
    <div class="showcase-slot">copyright-left slot</div>
  </div>
  <div data-slot="copyright-right">
    <div class="showcase-slot">copyright-right slot</div>
  </div>
</Footer>
Advanced

Full-width footer with slots

Compose pre-footer, post-footer, and legal content around structured navigation.

03
Live preview
Component usage.wrn
<Footer
  size="spacious"
  label="Advanced example"
  items='[
    {
      "type": "header",
      "label": "Product",
      "description": "Build consistent interfaces with WRNexusJS.",
      "items": [
        {
          "label": "Components",
          "href": "/base"
        },
        {
          "label": "Themes",
          "href": "/themes"
        },
        {
          "label": "Examples",
          "href": "/blocks"
        }
      ]
    },
    {
      "type": "header",
      "label": "Developers",
      "items": [
        {
          "label": "Documentation",
          "href": "/docs"
        },
        {
          "label": "Installation",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ]
    },
    {
      "type": "header",
      "label": "Resources",
      "items": [
        {
          "label": "Accessibility",
          "href": "/accessibility"
        },
        {
          "label": "Design tokens",
          "href": "/colors"
        },
        {
          "label": "Typography",
          "href": "/fonts"
        }
      ]
    },
    {
      "type": "header",
      "label": "Company",
      "items": [
        {
          "label": "WorkRoot",
          "href": "https://workroot.in",
          "external": true
        },
        {
          "label": "WRNexusJS",
          "href": "https://wrnexusjs.dev",
          "external": true
        }
      ]
    }
  ]'
  columns="4"
  maxWidth="full"
  copyright="Built with WRNexusJS">
  <div data-slot="pre-footer">
    <div class="showcase-footer-banner"><strong>Stay informed</strong><a href="#notifications">Manage notifications</a></div>
  </div>
  <div data-slot="post-footer">
    <div class="showcase-slot">post-footer slot</div>
  </div>
  <div data-slot="copyright-left">
    <div class="showcase-slot">copyright-left slot</div>
  </div>
  <div data-slot="copyright-right">
    <div class="showcase-footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a></div>
  </div>
</Footer>
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@selectFires when an item, option, card, or result is selected.
@actionFires when the component's primary or item action is activated.
Declarative handlers.wrn
<Footer
  @select='console.log(payload)'
  @action='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Footer\"], [data-component=\"Footer\"]")

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Footer navigation"No
itemsunknown[][]No
columnsnumber3No
maxWidthstring"compact"No
copyrightstring""No
classstring""No