How to Navigate in a Telegram Bot: Inline buttons, reply menus, commands and Mini App

from aiogram import Bot, Dispatcher, F
from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton, CallbackQuery
from aiogram.filters import CommandStart

bot = Bot(token="YOUR_BOT_TOKEN")
dp = Dispatcher()

# Главное меню
def main_menu() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        [
            InlineKeyboardButton(text="📦 Каталог", callback_data="catalog"),
            InlineKeyboardButton(text="🛒 Корзина", callback_data="cart"),
        ],
        [
            InlineKeyboardButton(text="📞 Поддержка", callback_data="support"),
            InlineKeyboardButton(text="⚙️ Настройки", callback_data="settings"),
        ],
    ])

@dp.message(CommandStart())
async def start(message):
    await message.answer(
        "Привет! Выберите раздел:",
        reply_markup=main_menu()
    )

# Обработка нажатий
@dp.callback_query(F.data == "catalog")
async def show_catalog(callback: CallbackQuery):
    # Обновляем сообщение вместо отправки нового
    await callback.message.edit_text(
        "📦 Каталог товаров:",
        reply_markup=InlineKeyboardMarkup(inline_keyboard=[
            [InlineKeyboardButton(text="← Назад", callback_data="back_main")],
        ])
    )
    await callback.answer()  # убираем "часики" на кнопке

@dp.callback_query(F.data == "back_main")
async def back_to_main(callback: CallbackQuery):
    await callback.message.edit_text(
        "Главное меню:",
        reply_markup=main_menu()
    )
    await callback.answer()

const { Bot, InlineKeyboard } = require('grammy');
const bot = new Bot('YOUR_BOT_TOKEN');

// Функция создания главного меню
function mainMenu() {
    return new InlineKeyboard()
        .text('📦 Каталог', 'catalog').text('🛒 Корзина', 'cart').row()
        .text('📞 Поддержка', 'support').text('⚙️ Настройки', 'settings');
}

bot.command('start', async (ctx) => {
    await ctx.reply('Привет! Выберите раздел:', {
        reply_markup: mainMenu(),
    });
});

bot.callbackQuery('catalog', async (ctx) => {
    await ctx.editMessageText('📦 Каталог товаров:', {
        reply_markup: new InlineKeyboard().text('← Назад', 'back_main'),
    });
    await ctx.answerCallbackQuery();
});

bot.callbackQuery('back_main', async (ctx) => {
    await ctx.editMessageText('Главное меню:', {
        reply_markup: mainMenu(),
    });
    await ctx.answerCallbackQuery();
});

InlineKeyboardButton(
    text="🌐 Открыть сайт",
    url="https://your-site.ru"
)

from aiogram.types import ReplyKeyboardMarkup, KeyboardButton, ReplyKeyboardRemove

def main_reply_keyboard() -> ReplyKeyboardMarkup:
    return ReplyKeyboardMarkup(
        keyboard=[
            [KeyboardButton(text="📦 Каталог"), KeyboardButton(text="🛒 Корзина")],
            [KeyboardButton(text="📞 Поддержка"), KeyboardButton(text="ℹ️ О нас")],
        ],
        resize_keyboard=True,   # компактный размер
        one_time_keyboard=False # не скрывать после нажатия
    )

@dp.message(CommandStart())
async def start(message):
    await message.answer(
        "Выберите раздел:",
        reply_markup=main_reply_keyboard()
    )

# Обработка нажатия по тексту кнопки
@dp.message(F.text == "📦 Каталог")
async def catalog(message):
    await message.answer("Открываю каталог...")

# Убрать клавиатуру когда не нужна
@dp.message(F.text == "Скрыть меню")
async def hide_keyboard(message):
    await message.answer(
        "Клавиатура скрыта",
        reply_markup=ReplyKeyboardRemove()
    )

/setcommands
Choose a bot
Enter the list:

start - Getting started
menu - Main menu
catalog - Product catalog
Cart - My basket
help
settings - Settings

from aiogram.filters import command

@dp.message(Command("menu")
async def show menu(message):
wait message.answer("Main menu:", reply markup=main menu())

@dp.message(Command("help"))
async def help command(message):
await message.answer.
"Available commands:\n"
"/start is the beginning of work\n"
"/menu is the main menu\n"
"/catalog - directory\n"
"/cart - basket\n"
"/help is this reference"
)

# Программная установка кнопки Menu через Bot API
from aiogram.types import MenuButtonWebApp, WebAppInfo

await bot.set_chat_menu_button(
    menu_button=MenuButtonWebApp(
        text="Открыть приложение",
        web_app=WebAppInfo(url="https://your-site.ru/app")
    )
)

<!-- Минимальная структура Mini App -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
    <script>
        const tg = window.Telegram.WebApp;
        tg.ready(); // инициализация

        // Цвет интерфейса из темы Telegram
        document.body.style.background = tg.themeParams.bg_color;

        // Главная кнопка внизу экрана
        tg.MainButton.setText('Оформить заказ');
        tg.MainButton.show();
        tg.MainButton.onClick(() => {
            // Отправляем данные в бота
            tg.sendData(JSON.stringify({ action: 'order', items: [] }));
        });
    </script>
</body>
</html>

# Универсальная структура с кнопкой Назад
def catalog_menu() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        [InlineKeyboardButton(text="👕 Одежда",     callback_data="cat_clothes")],
        [InlineKeyboardButton(text="👟 Обувь",      callback_data="cat_shoes")],
        [InlineKeyboardButton(text="🎒 Аксессуары", callback_data="cat_accessories")],
        [InlineKeyboardButton(text="← Главное меню", callback_data="back_main")],
    ])

# Good: Unique identifiers with context
InlineKeyboardButton(text="Next →", callback data="page:2")
InlineKeyboardButton(text="Product 15", callback data="item:15")

# Bad: Same for different actions
InlineKeyboardButton(text="Next →", callback data="next")
InlineKeyboardButton(text="Back", callback data="back")
If you use several levels, the back will work unpredictably

Structure:
● No more than 3 levels of nesting
● Each level (except the first) has a back button.
/start always returns to the main menu
/help shows a list of available commands

Inline buttons:
● No more than 2-3 buttons in one line
Callback data is unique and has an action:id pattern.
Each handler calls callback.answer()
Edit message is used instead of sending a new message where possible.

Teams:
● The list of commands is given through BotFather (/setcommands).
Commands are documented briefly and clearly

Reply keyboard:
Resize keyboard=True for compact display
● There is a way to restore the keyboard if the user has hidden it