Skip to main content

Layout Types

tip

Before diving into our specific layout types, we highly recommend reviewing the Layout Docs of NextJS. This will give you a foundational understanding of how layouts function in Next.js, setting the stage for you to fully appreciate the unique features of our layouts.

Overview​

Our application supports three primary layout types to cater to diverse UI needs:

Each layout type is designed with flexibility and customization in mind.

Vertical Layout​

The Vertical Layout serves as the default configuration. It includes these key components:

  • Navigation Menu: Positioned on the left side, providing easy access to different sections
  • Navbar: Located at the top, it offers some actions
  • Content: The main section for displaying page-specific content
  • Footer: Situated at the bottom, it typically contains auxiliary information or links.

For detailed information about each component and customization options, visit Vertical Layout Components.

Horizontal Layout​

Opt for the Horizontal Layout to give your application a different feel. This layout includes:

  • Navbar: At the very top, similar to the Vertical Layout
  • Navigation Menu: Positioned below the Navbar, spanning horizontally
  • Content: The main section for displaying page-specific content
  • Footer: Like in the Vertical Layout, it's at the bottom of the page.

For detailed information about each component and customization options, visit Horizontal Layout Components.

Blank Layout​

The Blank Layout is your canvas for pages where a standard layout is unnecessary or undesirable, such as login or registration pages. It's a clean slate, allowing complete freedom in design and structure.

This layout type offers no predefined components, giving you full creative control to build from the ground up.