Skip to main content

Horizontal Layout Components

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

1. Header​

The Header is the topmost section of the layout, containing the Navbar and the Navigation menu. It is designed to be compact and intuitive, allowing users to quickly access the navigation menu and other essential actions.

Header Component​

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

Props​

The Header component takes the following properties:

Prop NameTypeRequiredDescription
childrenReactNodeYesThis prop is used to pass child components or elements that will be rendered inside the Header component.
overrideStylesCSSObjectNoThis allows the user to pass custom styles to the Header 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/horizontal/Header.tsx file for its usage.

How to update Content?​

To change the content of the header, you can do so in the src/components/layout/horizontal/Header.tsx file itself as this file is designed for displaying content in the header.

How to update Styling?​

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

// Component Imports
import LayoutHeader from '@layouts/components/horizontal/Header'

const Header = (/* props if any */) => {
  return (
    <LayoutHeader overrideStyles={{ backgroundColor: 'lightcyan !important' }}>
      ...
    </LayoutHeader>
  )
}

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

1. 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
  • Company Logo and/or Name: Positioned prominently, this represents your brand identity and serves as a visual anchor for users.
Right Side Section​
  • Template Search: An intuitive search function to quickly navigate to a specific page
  • Change Language: This feature allows users to switch the application'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/horizontal/Navbar.tsx, ensuring a structured and accessible location.

Usage​

You may refer to the src/components/layout/horizontal/Header.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/horizontal/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 LayoutHeader from '@layouts/components/horizontal/Header'

const Header = (/* props if any */) => {
  return (
    <LayoutHeader overrideStyles={{ '& .ts-horizontal-layout-navbar': { backgroundColor: 'lightcyan' } }}>
      ...
    </LayoutHeader>
  )
}

2. Navigation Menu​

The Navigation Menu is organized for straightforward access and navigation:

  • Navigation Group (Submenu): These groups include navigation items or smaller subgroups, forming a hierarchical menu structure. For detailed guidance, see here
  • Navigation Item: The fundamental unit of the navigation menu, each item represents a link to a specific page of the application. For a deeper understanding, refer here

The Navigation component is created to render the navigation menu which contail all the navigation items (submenus and menu items) and it serves as a dedicated wrapper, encapsulating your navigation menu. You can update this component as per your requirements as it is localted src/components/layout/horizontal/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.
Usage​

You may refer to the src/components/layout/horizontal/Header.tsx file for its usage.

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

HorizontalMenu Component​

The HorizontalMenu component is created to render the navigation items (submenus and menu items). This component is strategically placed src/components/layout/horizontal/HorizontalMenu.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 HorizontalMenu 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.
Usage​

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

VerticalNavContent Component​

The VerticalNavContent component is created to render the navigation items (submenus and menu items) in the vertical navigation menu for the mobile and tablet devices. You can update this component as per your requirements as it is localted src/components/layout/horizontal/VerticalNavContent.tsx. You may refer to the src/components/layout/horizontal/HorizontalMenu.tsx file for its usage.

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/horizontal/LayoutContent.tsx, ensuring a structured and accessible location. You may refer to the src/@layouts/HorizontalLayout.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/horizontal/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/horizontal/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/horizontal/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/horizontal/Footer'

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

export default Footer

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