Skip to main content

Vertical Layout Components

Understanding the structure of our Vertical Layout is crucial for efficient navigation and customization. This layout comprises several components, each designed for specific functionality and user experience.

1. Navigation Menu (left sidebar)​

The Navigation Menu, positioned on the left side, is organized for straightforward access and navigation:

  • Navigation Header: This area showcases your company's brand, featuring the logo and/or name. It also includes icons for toggling the sidebar that allows users to collapse or expand the navigation menu
  • Navigation Section (MenuSection): This segment hosts various navigation groups and items, organizing them into coherent sections for better user experience. Learn more about structuring this section here
  • Navigation Group (SubMenu): These groups include navigation items or smaller subgroups, forming a hierarchical menu structure. For detailed guidance, see here
  • Navigation Item (MenuItem): The fundamental unit of the navigation menu, each item represents a link to a specific page of the template. For a deeper understanding, refer here.

The Navigation component is created to render the navigation menu which contains the navigation header and all the navigation items (menu sections, submenus and menu items). You can update this component as per your requirements as it is localted src/components/layout/vertical/Navigation.tsx. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your navigation menu.

Props​

The Navigation component takes the following properties:

Prop NameTypeDescription
dictionaryAwaited<ReturnType<typeof getDictionary>>Dynamic object for localization or language-specific text. This prop is used only if you are using the translation (i18n) feature.
modesystem, light or darkThe mode of the template.
systemModelight or darkThe system mode of the user's device.

Usage​

You may refer to the src/app/[lang]/(dashboard)/(private)/layout.tsx file for its usage. (if translation (i18n) feature is implemented)

You may refer to the src/app/(dashboard)/(private)/layout.tsx file for its usage. (if the translation (i18n) feature is not implemented)

We encourage you to refer to the Vertical menu examples to understand how to structure your navigation menu and effectively utilize the various props available for all the related components.

The NavHeader component is created as a styled wrapper of the logo and the icons for toggling (collapsing/expanding) the navigation menu. This component is strategically placed src/@menu/components/vertical-menu/NavHeader.tsx, ensuring a structured and accessible location. You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage.

Logo Component​

The Logo component is created to render the logo and text of a company/brand. This component is strategically placed src/components/layout/shared/Logo.tsx, ensuring a structured and accessible location. You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage.

You can update this component as per your requirements. You may refer to this guide on how to customize the logo.

The NavCollapseIcons component is created to render the icons for toggling (collapsing/expanding) the navigation menu. This component is strategically placed src/@menu/components/vertical-menu/NavCollapseIcons.tsx, ensuring a structured and accessible location. You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage. You may also refer this example for all the props and their usage.

VerticalMenu Component​

The VerticalMenu component is created to render the navigation items (menu sections, submenus and menu items). This component is strategically placed src/components/layout/vertical/VerticalMenu.tsx, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your navigation menu.

Props​

The VerticalMenu component takes the following properties:

Prop NameTypeDescription
dictionaryAwaited<ReturnType<typeof getDictionary>>Dynamic object for localization or language-specific text. This prop is used only if you are using the translation (i18n) feature.
scrollMenu(container: any, isPerfectScrollbar: boolean) => voidThis prop is used to check if the menu is scrollable or not. If the menu is scrollable, then a shadow will appear below the nav-header.

Usage​

You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage.

2. Navbar​

The Navbar spans the top of the layout and is crafted to facilitate quick access to various functions:

Left Side Section​

  • Navigation Menu Toggler: This component is particularly useful for mobile and tablet devices, allowing users to toggle the navigation menu
  • Template Search: An intuitive search function to quickly navigate to a specific page.

Right Side Section​

  • Change Language: This feature allows users to switch the template's language, catering to a diverse audience
  • User Actions: Dedicated space for user-centric actions like profile, account settings, logout, etc.

The Navbar component serves as a dedicated wrapper, encapsulating your navbar content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/vertical/Navbar.tsx, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your navbar.

Props​

The Navbar component takes the following properties:

Prop NameTypeRequiredDescription
childrenReactNodeYesThis prop is used to pass child components or elements that will be rendered inside the Navbar component.
overrideStylesCSSObjectNoThis allows the user to pass custom styles to the Navbar component. It accepts a CSSObject, which is a type from the @emotion/styled library for defining CSS styles in JavaScript objects.

Usage​

You may refer to the src/components/layout/vertical/Navbar.tsx file for its usage.

How to update Content?​

To change the content of the navbar, you can do so in the src/components/layout/vertical/NavbarContent.tsx file. NavbarContent is a component designed for displaying content in the navbar.

How to update Styling?​

To update the navbar styling, you can do so like the following:

// Component Imports
import LayoutNavbar from '@layouts/components/vertical/Navbar'

const Navbar = () => {
  return (
    <LayoutNavbar overrideStyles={{ '& .ts-vertical-layout-navbar': { backgroundColor: 'lightcyan !important' } }}>
      ...
    </LayoutNavbar>
  )
}

export default Navbar

You may also refer to the src/@layouts/styles/vertical/StyledHeader.tsx file for all of our navbar stylings and then override them as per your requirements in the overrideStyles prop as shown above.

3. Content​

The Content section is the primary area of the layout, where the main content of the template is displayed.

LayoutContent Component​

The LayoutContent component serves as a dedicated wrapper, encapsulating your page content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/vertical/LayoutContent.tsx, ensuring a structured and accessible location. You may refer to the src/@layouts/VerticalLayout.tsx file for its usage.

The Footer, located at the bottom, provides essential information and links:

  • Copyright: Located on the left side, it asserts the ownership and copyright of the content and design
  • Important Links: Positioned on the right, this section typically includes links to significant pages like License, Themes, Support portal, etc., offering easy navigation to important information.

The Footer component serves as a dedicated wrapper, encapsulating your footer content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/vertical/Footer.tsx, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your footer.

Props​

The Footer component takes the following properties:

Prop NameTypeRequiredDescription
childrenReactNodeYesThis prop is used to pass child components or elements that will be rendered inside the Footer component.
overrideStylesCSSObjectNoThis allows the user to pass custom styles to the Footer component. It accepts a CSSObject, which is a type from the @emotion/styled library for defining CSS styles in JavaScript objects.

Usage​

You may refer to the src/components/layout/vertical/Footer.tsx file for its usage.

How to update Content?​

To change the content of the footer, you can do so in the src/components/layout/vertical/FooterContent.tsx file. FooterContent is a component designed for displaying content in the footer.

How to update Styling?​

To update the footer styling, you can do so like the following:

// Component Imports
import LayoutFooter from '@layouts/components/vertical/Footer'

const Footer = () => {
  return (
    <LayoutFooter overrideStyles={{ '& .ts-vertical-layout-footer-content-wrapper': { backgroundColor: 'lightcyan' } }}>
      ...
    </LayoutFooter>
  )
}

export default Footer

You may also refer to the src/@layouts/styles/vertical/StyledFooter.tsx file for all of our footer stylings and then override them as per your requirements in the overrideStyles prop as shown above.