diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 0d829a48..43b5d8e3 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -9,6 +9,7 @@
     - id: cdn-links
       title: CDN Links
 - title: Main Concepts
+  isOrdered: true
   items:
     - id: hello-world
       title: Hello World
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index 2738c853..352d29cc 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -69,7 +69,7 @@ class Section extends React.Component {
               display: isActive ? 'block' : 'none',
             },
           }}>
-          {section.items.map(item => (
+          {section.items.map((item, index) => (
             <li
               key={item.id}
               css={{
@@ -79,7 +79,12 @@ class Section extends React.Component {
                 isActive: isScrollSync
                   ? activeItemId === item.id
                   : isItemActive(location, item),
-                item,
+                item: section.isOrdered
+                  ? {
+                      ...item,
+                      title: `${index + 1}. ${item.title}`,
+                    }
+                  : item,
                 location,
                 onLinkClick,
                 section,