SiteMapPath not working with route attribute in nodes

I have this xml sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0"  xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0 MvcSiteMapSchema.xsd">
  <mvcSiteMapNode title="Home" controller="Home" action="Index" key="home">
    <mvcSiteMapNode title="Access Control" route="AccessControl_default" controller="Home" action="Index" key="access-control">
      <mvcSiteMapNode title="My dashboard" route="AccessControl_default" controller="Dashboard" action="Index" key="dashboard"/>
       <mvcSiteMapNode title="Personnel" route="AccessControl_default" clickable="false" key="personnel">
        <mvcSiteMapNode title="Groups" route="AccessControl_default" controller="Personnel" action="Groups" key="groups"/>
        <mvcSiteMapNode title="Members" route="AccessControl_default" controller="Personnel" action="People" key="people"/>
      </mvcSiteMapNode>
    </mvcSiteMapNode>
  </mvcSiteMapNode>
</mvcSiteMap>

This is the targeted route defined in area route configuration:

context.MapRoute(
    "AccessControl_default",
    "accesscontrol/{controller}/{action}/{id}",
    new { controller = "Home", action = "Index", id = UrlParameter.Optional },
    new[] { "UI.WebPortal.Areas.AccessControl.Controllers" }
);

Then navigation menu tree is shown with @Html.MvcSiteMap().SiteMap() but breadcrumb is not working when using @Html.MvcSiteMap().SiteMapPath(). Is it because I'm using routing explicitly? and what could be the solution?

While you use areas, just add area="...." to nodes under them.

...
<mvcSiteMapNode title="Groups" route="AccessControl_default" area="AccessControl" controller="Personnel" action="Groups" key="groups"/>
...