Skip to main content

Before/After Menu Content

Overview​

Before/after menu content is a feature that allows you to customize the layout of your menu by adding additional elements at the beginning or end of the menu. This feature is particularly useful for incorporating a header or footer into your menu layout.

Scrollable Before Content​

You can include a header or other content before the menu items and allow that content to scroll along with the menu content. Here we have rendered the content inside the perfect scrollbar so that the content can be scrolled. Alternatively, you can render the component outside the perfect scrollbar to keep the content fixed.

Here you can see an example of how to add a header before the menu items:

src/components/layout/vertical/Navigation.tsx
const BeforeMenuContent = () => {
  return <div>User Details</div>;
};

const Navigation = () => {
  return (
    <VerticalNav>
      ...
      <PerfectScrollbar options={{ wheelPropagation: false }}>
        {/* Before Menu Content */}
        <BeforeMenuContent />
        <Menu>
          <SubMenu label="Dashboards">
            <MenuItem>Analytics</MenuItem>
            <MenuItem>ECommerce</MenuItem>
          </SubMenu>
          <MenuItem href="/about">About</MenuItem>
          ...
        </Menu>
      </PerfectScrollbar>
    </VerticalNav>
  );
};

export default Navigation;

Scrollable After Content​

You can include a footer or other content after the menu items and allow that content to scroll along with the menu content. Here we have rendered the content inside the perfect scrollbar so that the content can be scrolled. Alternatively, you can render the component outside the perfect scrollbar to keep the content fixed.

Here you can see an example of how to add a footer after the menu items:

src/components/layout/vertical/Navigation.tsx
const AfterMenuContent = () => {
  return (
    <div>
      <label htmlFor="file">File progress:</label>
      <progress id="file" max="100" value="70">
        70%
      </progress>
      <div>Log Out</div>
    </div>
  );
};

const Navigation = () => {
  return (
    <VerticalNav>
      ...
      <PerfectScrollbar options={{ wheelPropagation: false }}>
        <Menu>
          <SubMenu label="Dashboards">
            <MenuItem>Analytics</MenuItem>
            <MenuItem>ECommerce</MenuItem>
          </SubMenu>
          <MenuItem href="/about">About</MenuItem>
          ...
        </Menu>
        {/* After Menu Content */}
        <AfterMenuContent />
      </PerfectScrollbar>
    </VerticalNav>
  );
};

Fixed Before & After Content​

If you want to include a header or footer in your menu that remains fixed and does not scroll with the menu content, you can refer to the following example:

src/components/layout/vertical/Navigation.tsx
const BeforeMenuContent = () => {
  return <div>User Details</div>;
};

const AfterMenuContent = () => {
  return (
    <div>
      <label htmlFor="file">File progress:</label>
      <progress id="file" max="100" value="70">
        70%
      </progress>
      <div>Log Out</div>
    </div>
  );
};

const Navigation = () => {
  return (
    <VerticalNav>
      ...
      {/* Before Menu Content */}
      <BeforeMenuContent />
      <PerfectScrollbar options={{ wheelPropagation: false }}>
        <Menu>
          <SubMenu label="Dashboards">
            <MenuItem>Analytics</MenuItem>
            <MenuItem>ECommerce</MenuItem>
          </SubMenu>
          <MenuItem href="/about">About</MenuItem>
          ...
        </Menu>
      </PerfectScrollbar>
      {/* After Menu Content */}
      <AfterMenuContent />
    </VerticalNav>
  );
};

That's it! You can now incorporate your desired content before or after the menu content as per your requirements.