diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -3,9 +3,9 @@
   background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
+  padding: 0 16px;
   color: var(--thread-top-bar-color);
-  border-bottom: 1px solid var(--border);
+  height: 56px;
 }
 
 div.topBarThreadInfo {
@@ -25,3 +25,15 @@
   font-size: var(--m-font-16);
   font-weight: var(--bold);
 }
+
+div.hide {
+  height: 0px;
+  opacity: 0;
+  transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
+}
+
+div.show {
+  height: 56px;
+  opacity: 1;
+  transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
+}
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classnames from 'classnames';
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types.js';
@@ -13,6 +14,7 @@
 };
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
+
   const threadBackgroundColorStyle = React.useMemo(
     () => ({
       background: `#${threadInfo.color}`,
@@ -22,7 +24,7 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   return (
-    <div className={css.topBarContainer}>
+    <>
       <div className={css.topBarThreadInfo}>
         <div
           className={css.threadColorSquare}
@@ -31,8 +33,46 @@
         <p className={css.threadTitle}>{uiName}</p>
         <ThreadAncestors threadInfo={threadInfo} />
       </div>
-    </div>
+    </>
   );
 }
 
-export default NavStateInfoBar;
+type PossiblyEmptyNavStateInfoBarProps = {
+  +threadInfoInput: ?ThreadInfo,
+};
+function PossiblyEmptyNavStateInfoBar(
+  props: PossiblyEmptyNavStateInfoBarProps,
+): React.Node {
+  const { threadInfoInput } = props;
+
+  const [threadInfo, setThreadInfo] = React.useState(threadInfoInput);
+
+  React.useEffect(() => {
+    if (threadInfoInput !== threadInfo) {
+      if (threadInfoInput) {
+        setThreadInfo(threadInfoInput);
+      } else {
+        const timeout = setTimeout(() => {
+          setThreadInfo(null);
+        }, 200);
+        return () => clearTimeout(timeout);
+      }
+    }
+  }, [threadInfoInput, threadInfo]);
+
+  const content = React.useMemo(() => {
+    if (threadInfo) {
+      return <NavStateInfoBar threadInfo={threadInfo} />;
+    } else {
+      return null;
+    }
+  }, [threadInfo]);
+
+  const classes = classnames(css.topBarContainer, {
+    [css.hide]: !threadInfoInput,
+    [css.show]: threadInfoInput,
+  });
+  return <div className={classes}>{content}</div>;
+}
+
+export default PossiblyEmptyNavStateInfoBar;