diff --git a/src/plugins/navigation/components/SearchBar.js b/src/plugins/navigation/components/SearchBar.js
new file mode 100644
index 000000000..2bfb15a32
--- /dev/null
+++ b/src/plugins/navigation/components/SearchBar.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ * @flow strict-local
+ */
+
+import {
+  Component,
+  styled,
+  SearchBox,
+  SearchInput,
+  Toolbar,
+  Glyph,
+} from 'flipper';
+import SearchBarButton from './SearchBarButton';
+
+type Props = {|
+  onFavorite: (query: string) => void,
+  onNavigate: (query: string) => void,
+|};
+
+type State = {|
+  query: string,
+|};
+
+const SearchChevronContainer = styled('div')({
+  marginRight: 12,
+});
+
+class SearchBar extends Component<Props, State> {
+  state = {
+    query: '',
+  };
+
+  favorite = (query: string) => {
+    this.props.onFavorite(query);
+  };
+
+  navigateTo = (query: string) => {
+    this.props.onNavigate(query);
+  };
+
+  queryInputChanged = (event: SyntheticInputEvent<>) => {
+    this.setState({query: event.target.value});
+  };
+
+  render = () => {
+    return (
+      <Toolbar>
+        <SearchBox>
+          <SearchInput
+            onChange={this.queryInputChanged}
+            onKeyPress={e => {
+              if (e.key === 'Enter') {
+                this.navigateTo(this.state.query);
+              }
+            }}
+            placeholder="Navigate To..."
+          />
+          <SearchChevronContainer>
+            <Glyph name="chevron-down" size={12} />
+          </SearchChevronContainer>
+        </SearchBox>
+        <SearchBarButton
+          icon="send"
+          onClick={() => this.navigateTo(this.state.query)}
+        />
+        <SearchBarButton
+          icon="star"
+          onClick={() => this.favorite(this.state.query)}
+        />
+      </Toolbar>
+    );
+  };
+}
+
+export default SearchBar;
diff --git a/src/plugins/navigation/components/SearchBarButton.js b/src/plugins/navigation/components/SearchBarButton.js
new file mode 100644
index 000000000..7412142c6
--- /dev/null
+++ b/src/plugins/navigation/components/SearchBarButton.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {Glyph, styled} from 'flipper';
+
+type Props = {|
+  icon: string,
+  onClick?: () => void,
+|};
+
+const SearchBarButton = styled('div')({
+  marginRight: 9,
+  marginTop: -3,
+  marginLeft: 4,
+  position: 'relative',
+});
+
+export default function(props: Props) {
+  return (
+    <SearchBarButton onClick={props.onClick}>
+      <Glyph name={props.icon} size={16} variant="outline" />
+    </SearchBarButton>
+  );
+}
diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js
index 1e67800b5..c8bad0749 100644
--- a/src/plugins/navigation/index.js
+++ b/src/plugins/navigation/index.js
@@ -7,6 +7,7 @@
  */
 
 import {FlipperPlugin, FlexColumn} from 'flipper';
+import SearchBar from './components/SearchBar';
 
 type State = {||};
 
@@ -43,12 +44,19 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     }
   };
 
+  navigateTo = (query: string) => {
+    this.getDevice().then(device => {
+      device.navigateToLocation(query);
+    });
+  };
+
   render() {
     return (
       <FlexColumn>
-        {this.props.persistedState.data.map((d, i) => (
-          <div key={i}>{JSON.stringify(d)}</div>
-        ))}
+        <SearchBar
+          onNavigate={this.navigateTo}
+          onFavorite={(query: string) => {}}
+        />
       </FlexColumn>
     );
   }