Ensuring a consistent and user-friendly interface is a key aspect of web development. One common challenge is creating a sticky footer that remains at the bottom of the page regardless of the content length. In this blog post, I will guide you through creating a sticky footer using Mantine, a modern React component library. We’ll use Mantine’s Flex component to achieve a clean and responsive layout.
Thank me by sharing on Twitter 🙏
Introduction
When designing web pages, it’s crucial to have a footer that sticks to the bottom of the viewport when the content is short but stays at the bottom of the content when the content is long. This ensures a polished look and a better user experience. Using Mantine, we can easily implement this feature. Follow along as I break down the process into manageable steps.
Setting Up the Layout
Importing Mantine Components
First, let’s import the necessary Mantine components. We will use the MantineProvider for global styles, and Flex for our layout. We will also create separate components for the header, main content area, and footer.
// src/App.tsx
import React from 'react';
import { MantineProvider, Flex } from '@mantine/core';
import Header from './components/Header';
import Container from './components/Container';
import Footer from './components/Footer';
const App: React.FC = () => {
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<Flex direction="column" style={{ minHeight: '100vh' }}>
<Header />
<Container style={{ flex: 1 }}>
{/* Your main content goes here */}
</Container>
<Footer />
</Flex>
</MantineProvider>
);
};
export default App;In this snippet, I have wrapped the entire application with MantineProvider to apply global styles. The Flex component is used to arrange our header, main content, and footer in a column layout. The style={{ minHeight: '100vh' }} ensures that the Flex container takes the full height of the viewport.
Creating the Header Component
Next, let’s create a simple header component. This component will serve as the top section of our layout.
Elon Musk
$16.99 (as of December 21, 2024 19:39 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
The Coming Wave: Technology, Power, and the Twenty-First Century's Greatest Dilemma
$17.72 (as of December 21, 2024 19:39 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Syntech USB C to USB Adapter Pack of 2 USB C Male to USB 3.0 Female Adapter Compatible with MacBook Pro Air 2024, Microsoft Surface, iPad,Samsung Notebook, Dell XPS and More Type C Devices,Space Grey
$9.99 (as of December 21, 2024 08:38 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)// src/components/Header.tsx
import React from 'react';
import { Box } from '@mantine/core';
const Header: React.FC = () => {
return (
<Box component="header" sx={{ height: 60, padding: 'xs' }}>
<div>Header Content</div>
</Box>
);
};
export default Header;In the Header component, I used the Box component from Mantine and set its height to 60 pixels with some padding. This will be our header’s height.
Creating the Main Content Area
The main content area will expand to take up the available space between the header and footer. Here’s how you can create it:
// src/components/Container.tsx
import React from 'react';
import { Box } from '@mantine/core';
interface ContainerProps {
children: React.ReactNode;
}
const Container: React.FC<ContainerProps> = ({ children }) => {
return (
<Box component="main" sx={{ flex: 1, padding: 'xs' }}>
{children}
</Box>
);
};
export default Container;In the Container component, the flex: 1 style allows this component to grow and take the remaining space, ensuring the footer stays at the bottom.
Creating the Footer Component
Lastly, we’ll create the footer component. This component will stay at the bottom of the page when the content is short.
// src/components/Footer.tsx
import React from 'react';
import { Box } from '@mantine/core';
const Footer: React.FC = () => {
return (
<Box component="footer" sx={{ height: 60, padding: 'xs' }}>
<div>Footer Content</div>
</Box>
);
};
export default Footer;In the Footer component, I also used the Box component and set its height to 60 pixels. This component will be our footer’s height.
Ensuring Responsiveness
To ensure our layout is responsive, Mantine’s Flex component does most of the heavy lifting. The key styles we’ve applied (flexDirection: 'column', flex: 1, and minHeight: '100vh') ensure that our layout adjusts gracefully across different screen sizes.
Conclusion
Creating a sticky footer in a Mantine-based site is straightforward when using the Flex component. By setting up a flexible and responsive layout, we ensure a consistent user experience, regardless of the content length. Using Mantine’s powerful components, we can achieve a polished and modern interface with minimal effort.
