diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index 9dcccce..dc79b39 100644
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
@@ -1 +1 @@
-.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}
+.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;cursor:pointer;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(../img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}
diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss
index 39a175f..58ea7d4 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -28,5 +28,90 @@
                 transform: translateY(-50%);
             }
         }
+        &-nav {
+            display: flex;
+            align-items: center;
+            .item {
+                position: relative;
+                height: 60px;
+                line-height: 60px;
+                font-size: 15px;
+                padding: 0 8px;
+                margin-right: 15px;
+                transition: color 0.35s;
+                white-space: nowrap;
+                cursor: pointer;
+                color: var(--main);
+                &:last-child {
+                    margin-right: 0;
+                }
+                &::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    height: 3px;
+                    transition: opacity 0.5s, transform 0.5s;
+                    border-radius: 6px 6px 0 0;
+                    opacity: 0;
+                    transform: scaleX(0.25);
+                    background: var(--theme);
+                }
+                &.active,
+                &:hover {
+                    color: var(--theme);
+                    &::after {
+                        opacity: 1;
+                        transform: scaleX(1);
+                    }
+                }
+            }
+        }
+        &-search {
+            position: relative;
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            .input {
+                background: var(--classC);
+                width: 170px;
+                height: 34px;
+                border: 1px solid transparent;
+                padding: 0 18px;
+                color: var(--routine);
+                transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
+                border-radius: 17px 0 0 17px;
+                &:focus {
+                    background: var(--background);
+                    border-color: var(--theme);
+                    padding-right: 28px;
+                    ~ .icon {
+                        transform: translate3d(0, -50%, 0) rotateY(180deg);
+                    }
+                }
+            }
+            .submit {
+                position: relative;
+                z-index: 1;
+                height: 34px;
+                border: none;
+                background: var(--theme);
+                color: #fff;
+                border-radius: 0 17px 17px 0;
+                padding: 0 10px;
+            }
+            .icon {
+                position: absolute;
+                top: 50%;
+                left: 142px;
+                width: 28px;
+                height: 38px;
+                background: url(../img/search.png);
+                background-size: 100% 100%;
+                transition: transform 0.35s;
+                transform: translate3d(100%, -50%, 0) rotateY(180deg);
+            }
+        }
     }
 }
diff --git a/assets/img/search.png b/assets/img/search.png
new file mode 100644
index 0000000..72b32b8
Binary files /dev/null and b/assets/img/search.png differ
diff --git a/functions.php b/functions.php
index d60799d..cd1eb60 100644
--- a/functions.php
+++ b/functions.php
@@ -58,4 +58,20 @@ function themeConfig($form)
     );
     $JLogo->setAttribute('class', 'joe_content joe_image');
     $form->addInput($JLogo);
+
+    $JNavMaxNum = new Typecho_Widget_Helper_Form_Element_Select(
+        'JNavMaxNum',
+        array(
+            '3' => '3个（默认）',
+            '4' => '4个',
+            '5' => '5个',
+            '6' => '6个',
+            '7' => '7个',
+        ),
+        '3',
+        '选择导航栏最大显示的个数',
+        '介绍：用于设置最大多少个后，以更多下拉框显示'
+    );
+    $JNavMaxNum->setAttribute('class', 'joe_content joe_global');
+    $form->addInput($JNavMaxNum->multiMode());
 } ?>
\ No newline at end of file
diff --git a/public/header.php b/public/header.php
index 222fb74..edb497c 100644
--- a/public/header.php
+++ b/public/header.php
@@ -6,6 +6,27 @@
             <a class="joe_header__above-logo" href="<?php $this->options->siteUrl(); ?>">
                 <img src="<?php $this->options->JLogo() ?>" alt="<?php $this->options->title(); ?>" />
             </a>
+            <nav class="joe_header__above-nav">
+                <a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>">首页</a>
+
+                <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
+
+                <!-- 判断是否超出设置的个数，未超出全部直接显示 -->
+                <?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?>
+                    <?php foreach ($pages->stack as $item) : ?>
+                        <a class="item" href="">首页</a>
+                    <?php endforeach; ?>
+                <?php else : ?>
+
+                <?php endif; ?>
+            </nav>
+            <form class="joe_header__above-search" method="post" action="<?php $this->options->siteUrl(); ?>">
+                <input maxlength="16" autocomplete="off" placeholder="请输入关键字..." name="s" class="input" type="text" />
+                <button type="submit" class="submit">Search</button>
+                <span class="icon"></span>
+            </form>
         </div>
     </div>
+
+
 </header>
\ No newline at end of file