diff --git a/components/layouts/navbar.vue b/components/layouts/navbar.vue
new file mode 100644
index 0000000..7fac5d1
--- /dev/null
+++ b/components/layouts/navbar.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+const itemMap = {
+	"bands": "/bands",
+	"authors": "/authors"
+};
+let cur = Object.keys(itemMap).find(a => itemMap[a] === useRoute().name) || "";
+let selected: string[] = [cur]
+const clickFn = (minfo) => {
+	navigateTo(itemMap[ minfo.key ])
+}
+</script>
+
+<template>
+	<a-menu mode="horizontal" class="navibar" :style="{
+		height: '40px',
+		alignSelf: 'center',
+		justifyContent: 'stretch'
+		}" @click="clickFn" :selectedKeys="selected">
+		<a-menu-item key="bands">
+			Bands
+		</a-menu-item>
+	</a-menu>
+</template>
+<style scoped>
+	.navibar {
+		align-self: stretch;
+	}
+</style>
\ No newline at end of file