Streamlit でハンバーガーメニューを表示しない

Streamlit でアプリケーションを作成すると画面の右上にハンバーガーメニューが表示されます。現時点では「標準機能 (設定) でこのメニューを非表示には出来ない」ようです。但し、CSS を操作することにより非表示にすることは可能です。今回はハンバーガーメニューの非表示設定例をメモしておきます。

venv 環境の作成¶

「ハンバーガーメニューの表示 / 非表示」とは関係ありませんが、Streamlit を利用する為の venv 環境作成手順をメモしておきます。

mkdir sample
cd sample
python3 -m venv .venv
echo 'source .venv/bin/activate' > .envrc
direnv allow
python3 -m pip install --upgrade pip
python3 -m pip install streamlit

「ハンバーガーメニューを表示する」サンプルスクリプト¶

特に意識せずに Streamlit 用コードを書くと実行時にハンバーガーメニューが表示されます。

#!/usr/bin/env python3

import streamlit as st

st.write("Hello, World!")

実行してみます。明示的にポート番号を指定しない場合、デフォルトで TCP/8501 を Listen します。

1	`streamlit run sample.py`

以下のようにハンバーガーメニューが表示されます。

file

「ハンバーガーメニューを表示しない」サンプルスクリプト¶

以下は「ハンバーガーメニューを非表示」に変更したサンプルです。 Markdown を挿入する機能を利用し、CSS を挿入することでハンバーガーメニューを非表示にしています。

#!/usr/bin/env python3

import streamlit as st

css = """
  <style>
  #MainMenu {visibility: hidden;}
  </style>
  """
st.markdown(css, unsafe_allow_html=True)

st.write("Hello, World!")

これでハンバーガーメニューが表示されなくなりました。

file