diff --git a/src/components/AppNavi/AppNavi.stories.tsx b/src/components/AppNavi/AppNavi.stories.tsx
new file mode 100644
index 0000000000..1911fe0bc5
--- /dev/null
+++ b/src/components/AppNavi/AppNavi.stories.tsx
@@ -0,0 +1,27 @@
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+
+import { AppNavi } from './AppNavi'
+import { Props as IconProps } from '../Icon/Icon'
+
+const buttons = [
+  {
+    label: 'ボタン1',
+    icon: 'fa-file' as IconProps['name'],
+    current: true,
+  },
+  {
+    label: 'ボタン2',
+    icon: 'fa-user-alt' as IconProps['name'],
+    url: '/',
+  },
+  {
+    label: 'ボタン3',
+    icon: 'fa-cog' as IconProps['name'],
+    url: '/',
+  },
+]
+
+storiesOf('AppNavi', module).add('all', () => (
+  <AppNavi label="プラスメニュー" buttons={buttons}></AppNavi>
+))
diff --git a/src/components/AppNavi/AppNavi.tsx b/src/components/AppNavi/AppNavi.tsx
new file mode 100644
index 0000000000..e6ae86601b
--- /dev/null
+++ b/src/components/AppNavi/AppNavi.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react'
+import styled, { css } from 'styled-components'
+
+import { InjectedProps, withTheme } from '../../hocs/withTheme'
+import { Tag } from '../Tag/Tag'
+import { AppNaviButton, AppNaviButtonProps } from './AppNaviButton'
+
+interface Props {
+  label?: string
+  buttons?: AppNaviButtonProps[]
+}
+
+const AppNaviComponent: React.FC<Props & InjectedProps> = ({ theme, ...props }) => (
+  <Wrapper theme={theme}>
+    {props.label && (
+      <TagWrapper theme={theme}>
+        <Tag skeleton>{props.label}</Tag>
+      </TagWrapper>
+    )}
+
+    {props.buttons &&
+      props.buttons.map(button => (
+        <AppNaviButton
+          label={button.label}
+          icon={button.icon}
+          url={button.url}
+          target={button.target}
+          current={button.current}
+          key={button.label}
+        ></AppNaviButton>
+      ))}
+  </Wrapper>
+)
+
+export const AppNavi = withTheme(AppNaviComponent)
+
+const Wrapper: any = styled.nav`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: ${theme.size.pxToRem(40)};
+      padding: 0 ${theme.size.pxToRem(20)};
+      background-color: #fff;
+      box-shadow: 0 ${theme.size.pxToRem(1)} ${theme.size.pxToRem(4)} rgba(0, 0, 0, 0.15);
+    `
+  }}
+`
+
+const TagWrapper: any = styled.span`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      display: inline-block;
+      margin-right: ${theme.size.pxToRem(theme.size.space.xs)};
+    `
+  }}
+`
diff --git a/src/components/AppNavi/AppNaviButton.tsx b/src/components/AppNavi/AppNaviButton.tsx
new file mode 100644
index 0000000000..be2b7d8dc1
--- /dev/null
+++ b/src/components/AppNavi/AppNaviButton.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react'
+import styled, { css } from 'styled-components'
+
+import { InjectedProps, withTheme } from '../../hocs/withTheme'
+import { Icon, Props as IconProps } from '../Icon/Icon'
+
+export interface AppNaviButtonProps {
+  label: string
+  icon?: IconProps['name']
+  url?: string
+  target?: string
+  current?: boolean
+}
+
+const AppNaviButtonComponent: React.FC<AppNaviButtonProps & InjectedProps> = ({
+  theme,
+  ...props
+}) => (
+  <Wrapper theme={theme}>
+    {props.current ? (
+      <CurrentWrapper theme={theme} aria-selected="true">
+        {props.icon && (
+          <IconWrapper theme={theme}>
+            <Icon name={props.icon} size={14} color={theme.palette.TextBlack} />
+          </IconWrapper>
+        )}
+        {props.label}
+      </CurrentWrapper>
+    ) : (
+      <AnchorWrapper theme={theme} href={props.url} target={props.target ? props.target : '_self'}>
+        {props.icon && (
+          <IconWrapper theme={theme}>
+            <Icon name={props.icon} size={14} color={theme.palette.TextGrey} />
+          </IconWrapper>
+        )}
+        {props.label}
+      </AnchorWrapper>
+    )}
+  </Wrapper>
+)
+
+export const AppNaviButton = withTheme(AppNaviButtonComponent)
+
+const Wrapper: any = styled.div`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      display: inline-block;
+      margin-right: ${theme.size.pxToRem(4)};
+    `
+  }}
+`
+
+const BaseStyle = css`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      height: ${theme.size.pxToRem(40)};
+      padding: 0 ${theme.size.pxToRem(theme.size.space.xxs)};
+      font-size: ${theme.size.font.tall};
+      font-weight: bold;
+      text-decoration: none;
+    `
+  }}
+`
+
+const CurrentWrapper: any = styled.span`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      ${BaseStyle}
+      border-bottom: ${theme.size.pxToRem(2)} solid ${theme.palette.Main};
+      color: ${theme.palette.TextBlack};
+    `
+  }}
+`
+
+const AnchorWrapper: any = styled.a`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      ${BaseStyle}
+      color: ${theme.palette.TextGrey};
+      transition: background-color 0.3s;
+
+      &:hover{
+        background-color: ${theme.palette.hoverColor('#fff')};
+      }
+    `
+  }}
+`
+
+const IconWrapper: any = styled.figure`
+  ${({ theme }: InjectedProps) => {
+    return css`
+      display: inline-block;
+      padding: 0;
+      margin: 0 ${theme.size.pxToRem(theme.size.space.xxs)} 0 0;
+    `
+  }}
+`
diff --git a/src/components/AppNavi/index.ts b/src/components/AppNavi/index.ts
new file mode 100644
index 0000000000..ddd1e434cd
--- /dev/null
+++ b/src/components/AppNavi/index.ts
@@ -0,0 +1,2 @@
+export * from './AppNavi'
+export * from './AppNaviButton'