diff --git a/ui/component/buttonNavigation/index.js b/ui/component/buttonNavigation/index.js
new file mode 100644
index 000000000..9633b952d
--- /dev/null
+++ b/ui/component/buttonNavigation/index.js
@@ -0,0 +1,3 @@
+import ButtonNavigation from './view';
+
+export default ButtonNavigation;
diff --git a/ui/component/buttonNavigation/view.jsx b/ui/component/buttonNavigation/view.jsx
new file mode 100644
index 000000000..21411887a
--- /dev/null
+++ b/ui/component/buttonNavigation/view.jsx
@@ -0,0 +1,67 @@
+// @flow
+import React, { useState, useCallback } from 'react';
+import * as ICONS from 'constants/icons';
+import Button from 'component/button';
+
+type Props = {
+ isBackward: boolean,
+ history: {
+ entries: { key: string, title: string }[],
+ go: number => void,
+ goBack: () => void,
+ goForward: () => void,
+ index: number,
+ length: number,
+ location: { pathname: string },
+ push: string => void,
+ },
+};
+
+const ButtonNavigation = (props: Props) => {
+ const { isBackward, history } = props;
+ const [showHistory, setShowHistory] = useState(false);
+
+ const makeItem = useCallback(
+ (entry, index) => {
+ const goArg = index - history.index;
+ console.log(`index: ${index}, currentIndex: ${history.index}, goArg: ${goArg}, title: ${entry.title}`);
+ return (
+
{
+ setShowHistory(!showHistory);
+ history.go(goArg);
+ }}
+ >
+ {entry.title}
+
+ );
+ },
+ [history, showHistory]
+ );
+
+ return (
+
+
+ );
+};
+export default ButtonNavigation;
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 343167754..826ef0aac 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -11,6 +11,7 @@ import WunderBar from 'component/wunderbar';
import Icon from 'component/common/icon';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import Tooltip from 'component/common/tooltip';
+import ButtonNavigation from 'component/buttonNavigation';
// @if TARGET='app'
import { IS_MAC } from 'component/app/view';
// @endif
@@ -18,7 +19,15 @@ import { IS_MAC } from 'component/app/view';
type Props = {
balance: string,
roundedBalance: number,
- history: { push: string => void, goBack: () => void, goForward: () => void, location: { pathname: string } },
+ history: {
+ entities: {}[],
+ goBack: () => void,
+ goForward: () => void,
+ index: number,
+ length: number,
+ location: { pathname: string },
+ push: string => void,
+ },
currentTheme: string,
automaticDarkModeEnabled: boolean,
setClientSetting: (string, boolean | string) => void,
@@ -105,13 +114,7 @@ const Header = (props: Props) => {
{/* @if TARGET='app' */}
{!authHeader && (
-