@@ -46,6 +46,7 @@ module Category = {
 }
 
 type item = {
+id: string,
 keywords: array<string>,
 name: string,
 summary: string,
@@ -55,27 +56,31 @@ type item = {
 
 let allItems = [
 {
+id: "module-decorator",
 keywords: ["@bs.module"],
 name: "@module",
 summary: "This is the `@module` decorator.",
 category: Decorators,
 component: decorator_module,
 },
 {
+id: "as-decorator",
 keywords: ["@bs.as"],
 name: "@as",
 summary: "This is the `@as` decorator.",
 category: Decorators,
 component: decorator_as,
 },
 {
+id: "if-else",
 keywords: ["if", "else", "if else"],
 name: "if / else",
 summary: "This is the `if / else` control flow structure.",
 category: ControlFlow,
 component: controlflow_ifelse,
 },
 {
+id: "uncurried-function",
 keywords: ["uncurried"],
 name: "(.) => {}",
 summary: "This is an `uncurried` function.",
@@ -152,7 +157,7 @@ let make = () => {
 switch getAnchor(router.asPath) {
 | Some(anchor) =>
 Js.Array2.find(allItems, item =>
-Slugger.slug(item.name) === anchor
+Slugger.slug(item.id) === anchor
 )->Belt.Option.forEach(item => {
 setState(_ => ShowDetails(item))
 })
@@ -172,15 +177,15 @@ let make = () => {
 React.useEffect1(() => {
 switch (state, getAnchor(router.asPath)) {
 | (ShowDetails(item), Some(anchor)) =>
-let slug = Slugger.slug(item.name)
+let slug = Slugger.slug(item.id)
 
 if slug !== anchor {
 router->Next.Router.replace("syntax-lookup#" ++ anchor)
 } else {
 ()
 }
 | (ShowDetails(item), None) =>
-router->Next.Router.replace("syntax-lookup#" ++ Slugger.slug(item.name))
+router->Next.Router.replace("syntax-lookup#" ++ Slugger.slug(item.id))
 | (_, Some(_)) => router->Next.Router.replace("syntax-lookup")
 | _ => ()
 }