diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index e8e6681..ebf74a9 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -5,6 +5,7 @@ enum Pattern {
     ButtonWithIcon = 'Button with icon',
     Card = 'Card',
     Centering = 'Centering',
+    CircularNavigation = 'Circular navigation',
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index c831f3a..073692a 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -28,10 +28,31 @@ this
         expect(r).is(superFastWebsite);
         expect(r).is(seoFriendly);
     })
-    .finally(() => {/* Give me 1 star */}) 🎉       /* https://github.com/phuoc-ng/csslayout */
 `}
                 />
             </div>
+            <div
+                className="hljs"
+                style={{
+                    lineHeight: 1.5,
+                    listStyleType: 'none',
+                    marginTop: '-16px',
+                    paddingLeft: '40px',
+                }}
+            >
+                .finally(
+                <span className="hljs-function"><span className="hljs-params">()</span> => </span>
+                &#123;
+                <span className="hljs-comment">
+                    <a
+                        href="https://github.com/phuoc-ng/csslayout"
+                        style={{ color: 'currentColor', textDecoration: 'none' }}
+                    >
+                        &#47;* Give me 1 Github star here */
+                    </a>
+                </span>
+                }) 🎉
+            </div>
         </div>
     );
 };
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index c93b560..178ab28 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -89,6 +89,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
                         <CoverCard pattern={Pattern.Card} />
                         <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 935fba9..5aa37b7 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -201,6 +201,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
                         <CoverCard pattern={Pattern.Card} />
                         <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
diff --git a/client/patterns/circular-navigation/Cover.tsx b/client/patterns/circular-navigation/Cover.tsx
new file mode 100644
index 0000000..f54f869
--- /dev/null
+++ b/client/patterns/circular-navigation/Cover.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ position: 'relative' }}>
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            color: '#FFF',
+                            height: '16px',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            height: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(0deg) translateX(-32px)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            height: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(60deg) translateX(-32px)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            height: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(120deg) translateX(-32px)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            height: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(180deg) translateX(-32px)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            height: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(240deg) translateX(-32px)',
+                            width: '16px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                            borderRadius: '9999px',
+                            color: '#FFF',
+                            height: '16px',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(300deg) translateX(-32px)',
+                            width: '16px',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
new file mode 100644
index 0000000..2066628
--- /dev/null
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Square from '../../placeholders/Square';
+
+interface CircularItemProps {
+    degree: number;
+}
+
+const CircularItem: React.FC<CircularItemProps> = ({ degree, children }) => {
+    return (
+        <div
+            style={{
+                backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                borderRadius: '9999px',
+                color: '#FFF',
+                height: '32px',
+                position: 'absolute',
+                top: 0,
+                transform: `rotate(${degree}deg) translateX(-80px)`,
+                width: '32px',
+            }}
+        >
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    transform: `rotate(-${degree}deg)`,
+                    width: '100%',
+                }}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    const numItems = 6;
+
+    return (
+        <DetailsLayout title="Circular navigation">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ position: 'relative' }}>
+                                <div style={{ height: '32px', width: '32px' }}>
+                                    <Square />
+                                </div>
+                                {
+                                    Array(numItems).fill(0).map((_, i) => {
+                                        return (
+                                            <CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
+                                        );
+                                    })
+                                }
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    position: relative;
+">
+    <!-- The trigger element that will show all circles when user clicks it -->
+    ...
+
+    <!-- A circle menu item -->
+    <div style="
+        /* Position */
+        position: absolute;
+        top: 0;
+        /*
+        80px is the distance from the item to the trigger element.
+        Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
+        in case you want to have a total of 6 menu items.
+        The formulation is 360 / numberOfItems * indexOfItem
+        */
+        transform: rotate(0deg) translateX(-80px);
+
+        /* Must have the same size as the trigger element */
+        height: 32px;
+        width: 32px;
+    ">
+        <!-- The inner -->
+        <div style="
+            /*
+            Rotate it to make it displayed vertically
+            Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
+            in case you want to have a total of 6 menu items.
+            The formulation is -(360 / numberOfItems * indexOfItem)
+            */
+            transform: rotate(-0deg);
+
+            /* Content is centered */
+            align-items: center;
+            display: flex;
+            justify-content: center;
+
+            /* Take full size */
+            height: 100%;
+            width: 100%;
+        ">
+            <!-- The content -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat menu items -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 063a222..15bc30c 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -11,6 +11,7 @@
     <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/card</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
+    <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>