How to track active link in next.js?

Question

I have a sidebar component in my admin panel which has multiple links. Some of these links are in the dropdown menu. Now I want to add an active class based on an active link or if the active link is in the dropdown menu then to the dropdown toggle. Below is my code for a sidebar. Btw I am using antd framework for ui.

<Sider
      width={260}
      className={styles.sider}
      collapsible
      trigger={null}
      collapsed={drawer}
      breakpoint={"md"}
      collapsedWidth={0}
    >
      <Menu mode="inline">
        <Menu.Item
          icon={<IoGrid />}
          key="1"
          onClick={(e) => {
            toggleKey(e);
            gotoPage("/");
          }}
          className={selectedKey == 1 ? styles.active_item : ""}
        >
          Dashboard
        </Menu.Item>
        <SubMenu
          title="Settings"
          key="2"
          icon={<IoSettingsOutline />}
          className={selectedKey == 2 ? styles.active_item : ""}
        >
          <Menu.Item
            icon={<IoPersonAddOutline />}
            key="2.1"
            onClick={(e) => {
              toggleKey(e);
              gotoPage("/settings/profile");
            }}
          >
            Profile
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>

Btw the selectedKey and toggleKey function comes from top level component and gotoPage is just router.push functionality.
Thanks.

Does this answer your question? [Target Active Link when the route is active in Next.js](https://stackoverflow.com/questions/53262263/target-active-link-when-the-route-is-active-in-next-js) — Mario Nikolaus, Nov 01 '21 at 10:46
Actually the problem with current code is after page change the `selectedKey` is reseted — Musawer Shah, Nov 01 '21 at 15:43
@MarioNikolaus actually these solution works only if there is no dropdown like simple compare `router.pathname == '/dashboard' `.But if there is a dropdown which have let say three further links so any of these 3 links can enable the dropdown toggler. I want it like that. like this submenu it can have multiple links and the active class is set on submenu. — Musawer Shah, Nov 01 '21 at 15:45
Guys have a look at this link [link](http://admin.pixelstrap.com/viho/theme/index.html) check this link. I want this type of sidebar in next.js — Musawer Shah, Nov 01 '21 at 15:50

score 2 · Accepted Answer · answered Nov 01 '21 at 19:51

As per this answer you should use useRouter hook to get current path.

For your use case instead of equality check you should probably use startsWith or maybe some other check. So it would look like this

Let's say you have

Settings -> /settings
  Profile -> /settings/profile
  Notifications /settings/notifications

You check if current path starts /settings and you assume that Settings group is active and you simply expand Settings submenu and add active class to Settings group.

If you are currently on /settings/notification this would mean that you can identify following:

active group
active dropdown
active sublink

I think it is better to have custom LinkGroup component that would check for its 'activeness' and would add specific styling and show/hide its submenu.

How to track active link in next.js?

1 Answers1